工作中遇到一个问题：服务端返回了一个JSON字符串，默认输出的话是一长串，不美观也不方便查看。有一些前端组件支持JSON的美观展示，但是因为某些限制我们使用不了，所以期望可以通过原生的javascript轻量级地实现一个。发现stackoverflow上已经有高赞方案了，记录一下。

1. JSON字符串的pretty显示代码

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, 
        function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
}

var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};
var str = JSON.stringify(obj, undefined, 4);

output(str);
output(syntaxHighlight(str));

2. 加上一些简单的css：

pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

3. 视觉效果：

{
    "a": 1,
    "b": "foo",
    "c": [
        false,
        "false",
        null,
        "null",
        {
            "d": {
                "e": 130000,
                "f": "1.3e5"
            }
        }
    ]
}

代码引用地址：stackoverflow 。

JSON字符串格式化美观显示