使用正则表达式的格式化与高亮显示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 相关文章推荐
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
解析Vue.js中的组件
Feb 02 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
JS Canvas接口和动画效果大全
Apr 29 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
python实现实时视频流播放代码实例
2020/01/11 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
英国女性时尚品牌:Apricot
2018/12/04 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
大学生优秀的自我评价分享
2013/10/22 职场文书
2014年计生标语
2014/06/23 职场文书
六一儿童节开幕词
2015/01/29 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
MySQL事务的隔离级别详情
2022/07/15 MySQL