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>

send Me~

看看你的正则行不行——正则优化一般的json字符串的更多相关文章

  1. Shell遍历文件,对每行进行正则匹配

    Shell查看文件的最后5行,并对每行进行正则匹配,代码如下: #!/bin/sh pattern="HeartBeat" /home/test/log/log_20150205. ...

  2. js进阶正则表达式10-分组-多行匹配-正则对象的属性(小括号作用:分组,将小括号里面的东西看成一个整体,因为量词只对前一个字符有效)(多行匹配:m)(属性使用:reg.global)

    js进阶正则表达式10-分组-多行匹配-正则对象的属性(小括号作用:分组,将小括号里面的东西看成一个整体,因为量词只对前一个字符有效)(多行匹配:m)(属性使用:reg.global) 一.总结 1. ...

  3. js正则实现从一段复杂html代码字符串中匹配并处理特定信息

    js正则实现从一段复杂html代码字符串中匹配并处理特定信息 问题: 现在要从一个复杂的html代码字符串(包含各种html标签,数字.中文等信息)中找到某一段特别的信息(被一对“|”包裹着),并对他 ...

  4. vim 配置文件 ,高亮+自动缩进+行号+折叠+优化

    vim 配置文件 ,高亮+自动缩进+行号+折叠+优化 将一下代码copy到 用户目录下 新建文件为  .vimrc保存即可生效: 如果想所有用户生效 请修改 /etc/vimrc (建议先cp一份)& ...

  5. 【机器学习】--鲁棒性调优之L1正则,L2正则

    一.前述 鲁棒性调优就是让模型有更好的泛化能力和推广力. 二.具体原理 1.背景 第一个更好,因为当把测试集带入到这个模型里去.如果测试集本来是100,带入的时候变成101,则第二个模型结果偏差很大, ...

  6. 【机器学习】--线性回归中L1正则和L2正则

    一.前述 L1正则,L2正则的出现原因是为了推广模型的泛化能力.相当于一个惩罚系数. 二.原理 L1正则:Lasso Regression L2正则:Ridge Regression 总结: 经验值 ...

  7. 银行卡号正则,jq 正则,php正则

    1 jq正则 /** *银行号码正则 */ function luhmCheck(bankno){ var lastNum=bankno.substr(bankno.length-1,1);//取出最 ...

  8. 贝叶斯先验解释l1正则和l2正则区别

    这里讨论机器学习中L1正则和L2正则的区别. 在线性回归中我们最终的loss function如下: 那么如果我们为w增加一个高斯先验,假设这个先验分布是协方差为 的零均值高斯先验.我们在进行最大似然 ...

  9. Linux命令行批量替换多文件中的字符串【转】

    Linux命令行批量替换多文件中的字符串[转自百度文库] 一种是Mahuinan法,一种是Sumly法,一种是30T法分别如下: 一.Mahuinan法: 用sed命令可以批量替换多个文件中的字符串. ...

随机推荐

  1. ImageMagick常用指令详解

    Imagemagick常用指令 (ImageMagick--蓝天白云) (ImageMagick官网) (其他比较有价值的IM参考) (图片自动旋转的前端实现方案) convert 转换图像格式和大小 ...

  2. linux命令行安装使用KVM

    一.说明 本篇文章介绍的是基于centos环境来安装的,ip地址192.168.4.233 二.检查CPU是否支持虚拟技术 egrep 'vmx|svm' /proc/cpuinfo 如果有输出内容表 ...

  3. 2016 5.03开始记录我的it学习。

    好多谢立成师兄给我这个网址,我发现博客园不仅仅可以随笔记载很多东西,还是一个资源丰富的网站,接下来的四年我会用心去记录这些学习的点滴.

  4. Java 增强型的for循环 for each

    Java 增强型的for循环 for each For-Each循环 For-Each循环也叫增强型的for循环,或者叫foreach循环. For-Each循环是JDK5.0的新特性(其他新特性比如 ...

  5. webpack入坑之旅(一)不是开始的开始

    最近学习框架,选择了vue,然后接触到了vue中的单文件组件,官方推荐使用 Webpack + vue-loader构建这些单文件 Vue 组件,于是就开始了webpack的入坑之旅.因为原来没有用过 ...

  6. .NET中的GDI+

    GDI:Graphics Device Interface. System. Windows. Shapes 命名空间: 类 Ellipse 绘制一个椭圆. Line 在两个点之间绘制一条直线. Pa ...

  7. Java网络编程——IP

    类:InetAdrress 该类主要用于表示互联网协议(IP对象)地址,且无构造方法 主要方法: public static InetAddress getLocalHost()-->返回本地主 ...

  8. zabbix 用 LLD 完全自动化监控 Oracle

    文章转载自:http://mp.weixin.qq.com/s?__biz=MzA3MzYwNjQ3NA==&mid=2651296856&idx=1&sn=2bdf78071 ...

  9. 前博客 http://bbs.landingbj.com/mytopic.jsp?action=mytopic&username=57071

    在工作学习的过程中,遇到了亮眼的技术点,或者 学习的心得体会,总想要记录下来,或是方便自己,或是帮助如同自己现在这般的新人.前人种树,后人乘凉.享受了前人留下的阴凉,也会考虑自己给后来者种下几棵树苗. ...

  10. 通过自定义Attribute及泛型extension封装数据验证过程

    需求来源: 在日常工作中,业务流程往往就是大量持续的数据流转.加工.展现过程,在这个过程中,不可避免的就是数据验证的工作.数据验证工作是个很枯燥的重复劳动,没有什么技术含量,需要的就是对业务流程的准确 ...