使用正则表达式的格式化与高亮显示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(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
创建一个类Person的简单实例
May 17 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 Javascript
javascript实现简单留言板案例
Feb 09 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
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
浅谈python中的正则表达式(re模块)
2017/10/17 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
使用npy转image图像并保存的实例
2020/07/01 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
大型车展策划方案
2014/02/01 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js