正则表达式优化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 相关文章推荐
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
Python3字符串学习教程
2015/08/20 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
Python递归函数实例讲解
2019/02/27 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
应届本科生推荐信范文
2013/12/25 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
电子商务专业求职信
2014/03/08 职场文书
三年级学生期末评语
2014/12/26 职场文书
个人工作表现自我评价
2015/03/06 职场文书
运动会主持人开幕词
2016/03/04 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
Python制作表白爱心合集
2022/01/22 Python
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android