使用正则表达式的格式化与高亮显示json字符串


Posted in Javascript onDecember 03, 2014

json字符串很有用,有时候一些后台接口返回的信息是字符串格式的,可读性很差,这个时候要是有个可以格式化并高亮显示json串的方法那就好多了,下面看看一个正则表达式完成的json字符串的格式化与高亮显示

首先是对输入进行转换,如果是对象则转化为规范的json字符串,不是对象时,先将字符串转化为对象(防止不规范的字符串),然后再次转化为json串。其中json为输入。

if (typeof json !== 'string') {

    json = JSON.stringify(json);

} else {

    json = JSON.parse(json);

    json = JSON.stringify(json);

}

等规范完数据之后对字符串进行标记,为了后面的切分、重新组合

这里有几个地方要添加标记,包括大括号、小括号的前后和逗号的后面都要添加标记,我这里使用的是换行\r\n(这样在命令行下测试时效果会比较好看)。

// 在大括号前后添加换行

reg = /([\{\}])/g;

json = json.replace(reg, '\r\n$1\r\n');

// 中括号前后添加换行

reg = /([\[\]])/g;

json = json.replace(reg, '\r\n$1\r\n');

// 逗号后面添加换行

reg = /(\,)/g;

json = json.replace(reg, '$1\r\n');

添加完成标记之后就要做一些优化处理,去掉多余的换行、去掉逗号前面的换行,这样做是为了在切分是免得出现空串浪费一次循环处理,最后在冒号后面添加空格,看起来更漂亮。

// 去除多余的换行

reg = /(\r\n\r\n)/g;

json = json.replace(reg, '\r\n');

// 逗号前面的换行去掉

reg = /\r\n\,/g;

json = json.replace(reg, ',');

//冒号前面缩进

reg = /\:/g;

json = json.replace(reg, ': ');

接下来就是对这个初步处理过的串进行进一步处理了,我会在function(index, node) {}函数中添加逻辑,对每一个切分单元进行处理,包括缩进和美化格式。

$.each(json.split('\r\n'), function(index, node) {});

首先说下缩进,缩进的方法很简单,遇到{、[符号时缩进增加1,遇到}、]符号时缩进减少1,否则缩进量不变。

//这里遇到{、[时缩进等级加1,遇到}、]时缩进等级减1,没遇到时缩进等级不变

if (node.match(/\{$/) || node.match(/\[$/)) {

    indent = 1;

} else if (node.match(/\}/) || node.match(/\]/)) {

    if (pad !== 0) {

        pad -= 1;

    }

} else {

    indent = 0;

}

完成缩进后就该美化高亮显示代码了,这里要用到几个css规则,下面可以看到,对切分单元进行高亮显示的时候这里用正则进行判断,如果匹配到大括号标记为对象class、中括号标记为数组class、属性名称、属性值,一次对这些进行css规则添加,添加完成之后拼接起来就可以了。

.ObjectBrace{color:#00AA00;font-weight:bold;}

.ArrayBrace{color:#0033FF;font-weight:bold;}

.PropertyName{color:#CC0000;font-weight:bold;}

.String{color:#007777;}

.Number{color:#AA00AA;}

.Comma{color:#000000;font-weight:bold;}
//添加代码高亮

node = node.replace(/([\{\}])/g,"<span class='ObjectBrace'>$1</span>");

node = node.replace(/([\[\]])/g,"<span class='ArrayBrace'>$1</span>");

node = node.replace(/(\".*\")(\:)(.*)(\,)?/g,"<span class='PropertyName'>$1</span>$2$3$4");

node = node.replace(/\"([^"]*)\"(\,)?$/g,"<span class='String'>\"$1\"</span><span class='Comma'>$2</span>");

node = node.replace(/(-?\d+)(\,)?$/g,"<span class='Number'>$1</span><span class='Comma'>$2</span>");

最后我们看看完整的方法代码(这里我使用了jquery类库),以及测试地址:

要对jsonstr进行美化,这样就可以了APP.format(jsonstr),直接输出至<pre></pre>标签中就可以看到效果,

下面是一个测试地址,http://iforever.sinaapp.com/ 可以进去试一下,看看完整的源代码

<script>

    var APP=function(){

        var format=function(json){

            var reg=null,

                result='';

                pad=0,

                PADDING='    ';

            if (typeof json !== 'string') {

                json = JSON.stringify(json);

            } else {

                json = JSON.parse(json);

                json = JSON.stringify(json);

            }

            // 在大括号前后添加换行

            reg = /([\{\}])/g;

            json = json.replace(reg, '\r\n$1\r\n');

            // 中括号前后添加换行

            reg = /([\[\]])/g;

            json = json.replace(reg, '\r\n$1\r\n');

            // 逗号后面添加换行

            reg = /(\,)/g;

            json = json.replace(reg, '$1\r\n');

            // 去除多余的换行

            reg = /(\r\n\r\n)/g;

            json = json.replace(reg, '\r\n');

            // 逗号前面的换行去掉

            reg = /\r\n\,/g;

            json = json.replace(reg, ',');

            //冒号前面缩进

            reg = /\:/g;

            json = json.replace(reg, ': ');

            //对json按照换行进行切分然后处理每一个小块

            $.each(json.split('\r\n'), function(index, node) {

                var i = 0,

                    indent = 0,

                    padding = '';

                //这里遇到{、[时缩进等级加1,遇到}、]时缩进等级减1,没遇到时缩进等级不变

                if (node.match(/\{$/) || node.match(/\[$/)) {

                    indent = 1;

                } else if (node.match(/\}/) || node.match(/\]/)) {

                    if (pad !== 0) {

                        pad -= 1;

                    }

                } else {

                    indent = 0;

                }

                   //padding保存实际的缩进

                for (i = 0; i < pad; i++) {

                    padding += PADDING;

                }

                //添加代码高亮

                node = node.replace(/([\{\}])/g,"<span class='ObjectBrace'>$1</span>");

                node = node.replace(/([\[\]])/g,"<span class='ArrayBrace'>$1</span>");

                node = node.replace(/(\".*\")(\:)(.*)(\,)?/g,"<span class='PropertyName'>$1</span>$2$3$4");

                node = node.replace(/\"([^"]*)\"(\,)?$/g,"<span class='String'>\"$1\"</span><span class='Comma'>$2</span>");

                node = node.replace(/(-?\d+)(\,)?$/g,"<span class='Number'>$1</span><span class='Comma'>$2</span>");

                result += padding + node + '<br>';

                pad += indent;

            });

            return result;

        };

        return {

            "format":format,

        };

    }();

</script>

怎么样,json字符串是不是美观了很多呢,超级实用吧,这么好的东东,当然不能独享,这里推荐给小伙伴们。

Javascript 相关文章推荐
javascript实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jquery中获取元素里某一特定子元素的代码
Dec 02 #Javascript
JS逆序遍历实现代码
Dec 02 #Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 #Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 #Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 #Javascript
javascript框架设计读书笔记之种子模块
Dec 02 #Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 #Javascript
You might like
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
如何用php获取文件名后缀
2013/06/09 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python自动登录126邮箱的方法
2015/07/10 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
详解python解压压缩包的五种方法
2019/07/05 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
劳动竞赛活动方案
2014/02/20 职场文书
企业宣传口号
2014/06/12 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python