正则表达式优化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 jQuery插件练习
Dec 24 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
记录一次websocket封装的过程
Nov 23 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
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
又一个php 分页类实现代码
2009/12/03 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
vue的for循环使用方法
2019/02/12 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
Python简单实现Base64编码和解码的方法
2017/04/29 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
腾讯广告词
2014/03/19 职场文书
办理信用卡工作证明
2014/09/30 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
python实现简单的井字棋
2021/05/26 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis
Python实现照片卡通化
2021/12/06 Python
Python中如何处理常见报错
2022/01/18 Python
Redis基本数据类型List常用操作命令
2022/06/01 Redis
小程序实现侧滑删除功能
2022/06/25 Javascript