使用正則表達式的格式化与高亮显示json字符串
2017-07-13 09:48
555 查看
使用正則表達式的格式化与高亮显示json字符串
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) {});
首先说下缩进,缩进的方法非常easy,遇到{、[符号时缩进添加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字符串是不是美观了非常多呢,超级有用吧。这么好的东东。当然不能独享,这里推荐给小伙伴们。
參考来源:
使用正則表達式的格式化与高亮显示json字符串
http://www.lai18.com/content/351722.html
延伸阅读
《JavaScript正則表達式》系列技术文章整理收藏1JavaScript正則表達式中的ignoreCase属性使用具体解释
2具体解释JavaScript正則表達式中的global属性的使用
3简述JavaScript的正則表達式中test()方法的使用
4在JavaScript的正則表達式中使用exec()方法
5JavaScript正則表達式之multiline属性的应用
6简述JavaScript中正則表達式的用法
7jQuery获取上传文件的名称的正則表達式
8【JavaScript】利用正則表達式检查输入框输入的是否为网址
9Javascript 正則表達式实现为数字加入千位分隔符
10javascript中的正則表達式使用指南
11javascript使用正則表達式实现去掉空格之后的字符
12调试JavaScript中正則表達式中遇到的问题
13jquery使用正則表達式验证email地址的方法
14javascript正則表達式之search()使用方法实例
15javascript正則表達式使用replace()替换手机号的方法
16jQuery中用dom操作替代正則表達式
17javascript使用正則表達式检測IP地址
18使用正則表達式的格式化与高亮显示json字符串
19Js 正則表達式知识汇总
20实例分析js和C#中使用正則表達式匹配a标签
21正則表達式在JavaScript应用
22正則表達式在javascript中的几个实例
23使用 js+正則表達式为关键词加入链接
24用正則表達式和javascript对表单进行全面验证
25javascript正則表達式检验
26javascript学习笔记(八)正則表達式
27JS应用正則表達式转换大写和小写演示样例
28javascript正則表達式參数/g与/i及/gi的使用指南
29JavaScript利用正則表達式去除日期中的“-”
30删除javascript中凝视语句的正則表達式
31JavaScript利用正則表達式去除日期中的-
32node.js正則表達式获取网页中全部链接的代码实例
33javascript经常使用的正則表達式实例
34JS使用replace()方法和正則表達式进行字符串的搜索与替换实例
35JavaScript中的正則表達式简明总结
36JavaScript表单通过正則表達式验证电话号码
37JavaScript通过正則表達式实现表单验证电话号码
38js动态拼接正則表達式的两种方法
39通过正則表達式实现表单验证是否为中文
40js正則表達式中test,exec,match方法的差别说明
41JS正則表達式验证数字代码
42利用js正則表達式验证手机号,email地址,邮政编码
43js验证电话号码与手机支持+86的正則表達式
44JavaScript中的正則表達式
45正則表達式中特殊符号及正則表達式的几种方法总结(replace,test,search)
46经常使用的JavaScript验证正則表達式汇总
47用正則表達式替换图片地址img标签
48javascipt匹配单行和多行凝视的正則表達式
49js用正則表達式来验证表单(比較齐全的资源)
50JS正則表達式获取分组内容的方法具体解释
51JS正則表達式大全(整理具体且有用)
52js将字符串转成正則表達式的实现方法
53JS经常使用正則表達式总结
54js编写trim()函数及正則表達式的运用
55jQuery中校验时间格式的正則表達式小结
56JQuery数字类型验证正則表達式
57jQuery经常使用的正則表達式
58jquery macth正則表達式实例
59jquery经常使用见的正則表達式
60Jquery Validate 正則表達式有用验证代码大全
61js正則表達式的使用具体解释
62怎样使用Javascript正則表達式来格式化XML内容
6330分钟就入门的正則表達式基础教程
64正則表達式搭配js轻松处理json文本方便而老古
65js replace正則表達式应用案例解说
66有用的JS正則表達式(手机号码/IP正则/邮编正则/电话等)
67javascript 正則表達式相关应介绍
68JavaScript高级程序设计(第3版)学习笔记12 js正則表達式
69Java 正則表達式学习总结和一些小样例
70js限制文本框仅仅能输入数字(正則表達式)
71js中推断数字\字母\中文的正則表達式 (实例)
72javascript学习笔记(十一) 正則表達式介绍
73js正則表達式
74获取server传来的数据 用JS去空格的正則表達式
75javascript 进阶篇1 正則表達式,cookie管理。userData
76jQuery源代码分析-02正則表達式 RegExp 经常使用正則表達式
77JavaScript正則表達式的浏览器的差异
78经常使用的JavaScript正則表達式
79jquery里的正則表達式说明
80PHP匹配连续的数字或字母的正則表達式
81Javascript中正則表達式的全局匹配模式分析
82javascript学习笔记(五)正則表達式
83正则总结:JavaScript中的正則表達式
84js 替换功能函数,用正則表達式解决。js的所有替换
85javascript正則表達式中參数g(全局)的作用
86js各种验证文本框输入格式(正則表達式)
87javascript 正則表達式(一)
88匹配随意字符的正則表達式写法
89javascript 正則表達式触发函数进行高级替换
90JavaScript 学习笔记(十四) 正則表達式
91javascript下利用数组缓存正則表達式的实现方法
92Mootools 1.2教程 正則表達式
93javascript 获取链接文件地址中第一个斜线内的正則表達式
94用正則表達式 动态创建/添加css style script 兼容IE firefox
95trim原型函数看js正則表達式的性能
96正則表達式推断是否存在中文和全角字符和推断包括中文字符串长度
97javascript replace方法与正則表達式
98JS的replace方法与正則表達式结合应用解说
99论坛转贴工具中用到的正則表達式学习正则的好样例
相关文章推荐
- 使用正则表达式的格式化与高亮显示json字符串
- 使用正则表达式的格式化与高亮显示json字符串
- ant table 扩展 显示html文档 格式化json字符串 并且 实时动态关键字高亮
- 使用正则表达式的格式化与高亮显示json字符串
- C#后台格式化JSON字符串显示
- 使用jackson注解返还json对象(字符串数组),配合ajax做异步显示
- Pycharm使用技巧:Show as JSON(以友好的方式显示输出框的json字符串)
- HTML显示json字符串并且进行格式化
- 对Json字符串进行格式化显示
- 在使用Gson的toJson()方法转为json字符串的时候无法显示中文和符号的问题(已解决)
- 直接使用Sublime Text实现:HTTP访问URL+格式化返回的JSON字符串
- 淘淘商城系列——使用JsonView来格式化json字符串
- 使用fastjson对字符串格式化为JSON对象
- C# 使用Newtonsoft.Json.dll 格式化显示Json串
- springboot在使用controller返回list集合或json字符串到浏览器的时候不显示字符串,出现一些标签
- json时间数据,使用javascript格式化字符串
- 多语言环境下,使用SimpleDateFormat格式化时间字符串的时候,不能正确显示阿拉伯数字
- fastjson中转字符串时格式化、显示null值等
- 使用Gson和fastjson格式化JSON字符串
- 关于使用Volley下载的json字符串无法显示中文的问题(已解决)