使用正则表达式的格式化与高亮显示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绑定原理 简单解析与实现代码分享
Sep 06 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 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数据库操作面向对象的优点
2006/10/09 PHP
php数组键名技巧小结
2015/02/17 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
高三生物教学反思
2014/01/25 职场文书
暑期研修感言
2014/02/17 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
岗位工作说明书
2014/07/29 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
中学社团活动总结
2015/05/07 职场文书
运输公司工作总结
2015/08/11 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
JUnit5常用注解的使用
2021/07/02 Java/Android
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers