使用正则表达式的格式化与高亮显示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 相关文章推荐
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
js回调函数仿360开机
2019/12/26 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
详解Python字符串对象的实现
2015/12/24 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
python opencv读mp4视频的实例
2018/12/07 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python文件读写常见用法总结
2019/02/22 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
python3实现高效的端口扫描
2019/08/31 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
保证书范文大全
2014/04/28 职场文书
课外活动总结范文
2014/07/09 职场文书
公务员年终个人总结
2015/02/12 职场文书
司机岗位职责范本
2015/04/10 职场文书
跑吧孩子观后感
2015/06/10 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS