json字符串很有用，有时候一些后台接口返回的信息是字符串格式的，可读性很差，这个时候要是有个可以格式化并高亮显示json串的方法那就好多了，下面看看一个正则表达式完成的json字符串的格式化与高亮显示

首先是对输入进行转换，如果是对象则转化为规范的json字符串，不是对象时，先将字符串转化为对象（防止不规范的字符串），然后再次转化为json串。其中json为输入。

if (typeof json !== 'string') {

    json = JSON.stringify(json);

} else {

    json = JSON.parse(json);

    json = JSON.stringify(json);

}

等规范完数据之后对字符串进行标记，为了后面的切分、重新组合

这里有几个地方要添加标记，包括大括号、小括号的前后和逗号的后面都要添加标记，我这里使用的是换行rn（这样在命令行下测试时效果会比较好看）。

// 在大括号前后添加换行

reg = /([{}])/g;

json = json.replace(reg,'rn$1rn');

// 中括号前后添加换行

reg = /([[]])/g;

json = json.replace(reg,'rn$1rn');

// 逗号后面添加换行

reg = /(,)/g;

json = json.replace(reg,'$1rn');

添加完成标记之后就要做一些优化处理，去掉多余的换行、去掉逗号前面的换行，这样做是为了在切分是免得出现空串浪费一次循环处理，最后在冒号后面添加空格，看起来更漂亮。

// 去除多余的换行

reg = /(rnrn)/g;

json = json.replace(reg,'rn');

// 逗号前面的换行去掉

reg = /rn,/g;

json = json.replace(reg,',');

//冒号前面缩进

reg = /:/g;

json = json.replace(reg,': ');

接下来就是对这个初步处理过的串进行进一步处理了,我会在function(index,node) {}函数中添加逻辑，对每一个切分单元进行处理，包括缩进和美化格式。

$.each(json.split('rn'),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+)(,"<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,'rn$1rn');

            // 中括号前后添加换行

            reg = /([[]])/g;

            json = json.replace(reg,'rn$1rn');

            // 逗号后面添加换行

            reg = /(,)/g;

            json = json.replace(reg,'$1rn');

            // 去除多余的换行

            reg = /(rnrn)/g;

            json = json.replace(reg,'rn');

            // 逗号前面的换行去掉

            reg = /rn,/g;

            json = json.replace(reg,');

            //冒号前面缩进

            reg = /:/g;

            json = json.replace(reg,': ');

            //对json按照换行进行切分然后处理每一个小块

            $.each(json.split('rn'),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(/(".*")(:)(.*)(,"<span class='PropertyName'>$1</span>$2$3$4");

                node = node.replace(/"([^"]*)"(,"<span class='String'>"$1"</span><span class='Comma'>$2</span>");

                node = node.replace(/(-?d+)(,"<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获取服务器传来的数据 用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论坛转贴工具中用到的正则表达式学习正则的好例子