正则表达式优化JSON字符串的技巧


Posted in Javascript onDecember 24, 2015

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>

PS:正则表达式替换json字符串的某一项的数字值

aa=aa.replaceAll("\"ccfsID\":\"[0-9]*\"", "\"ccfsID\":\""+id1+"\"");

aa为json字符串,如:

{"items":[{"dishprice":30,"ccfsID":"","order.item.id":1,"zuofaid":"","zuofajiajia":0,"isTaoCan":false,"num":1,"price":30,"name":"","ID":"00000001","lsdishID":"","zuofaname":"","tzs":"","addTime":"2013-05-14"}],"deskId":"00000008"}
Javascript 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 #Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 #Javascript
JQuery实现的按钮倒计时效果
Dec 23 #Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 #Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 #Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 #Javascript
JavaScript中的函数(二)
Dec 23 #Javascript
You might like
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
php简单图像创建入门实例
2015/06/10 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
JSON Web Tokens的实现原理
2017/04/02 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
django在开发中取消外键约束的实现
2020/05/20 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
10个示例带你掌握python中的元组
2020/11/23 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
父亲的菜园教学反思
2014/02/13 职场文书
中青班党性分析材料
2014/02/16 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL