前提条件
从后台获得json字符或对象，或者自定义json字符串或对象。
原理
JSON.stringify本身就可以将JSON格式化，具体的用法是：JSON.stringify(res, null, 2); //res是要JSON化的对象，2是spacing的格式，用于缩进。
操作步骤
1、定义js函数
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
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>';
}
);
}
这个函数的参数json，可以是一个json字符串，也可以是一个对象。如果是一个json字符串，在函数中将不经过JSON.stringify的格式化，也就不能产生缩进的效果，除非字符串本身就含有缩进。因此，尽量给这个函数传递一个对象。
此外，这个函数将一个json对象转化为一段html代码，因此还需要等于相应的css样式。
2、定义css样式
<style>
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; } /*字符串的样式*/
.number { color: darkorange; } /*数字的样式*/
.boolean { color: blue; } /*布尔型数据的样式*/
.null { color: magenta; } /*null值的样式*/
.key { color: red; } /*key值的样式*/
</style>
3、定义html内容
在html文件中添加一个pre标签，用于显示格式化的json字符串
<pre id="result"></pre>
然后调用js代码，对该pre标签进行初始化即可
$('#result').html(syntaxHighlight(res));//其中res最好是对象，这样在函数中就可进行缩进等格式化处理。
