如何在页面上格式化显示json字符串
前提条件
从后台获得json字符串或对象，或者自定义json字符串或对象。
原理
JSON.stringify本身就可以将JSON格式化，具体的用法是：
JSON.stringify(res, null, 2); //res是要JSON化的对象，2是spacing的格式，用于缩进
操作步骤
1、定义js函数
1 function syntaxHighlight(json) { 2 if (typeof json != 'string') { 3 json = JSON.stringify(json, undefined, 2); 4 } 5 json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); 6 return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, 7 function(match) { 8 var cls = 'number'; 9 if (/^"/.test(match)) { 10 if (/:$/.test(match)) { 11 cls = 'key'; 12 } else { 13 cls = 'string'; 14 } 15 } else if (/true|false/.test(match)) { 16 cls = 'boolean'; 17 } else if (/null/.test(match)) { 18 cls = 'null'; 19 } 20 return '<span class="' + cls + '">' + match + '</span>'; 21 } 22 ); 23 }
这个函数的参数json，可以是一个json字符串，也可以是一个对象。如果是一个json字符串，在函数中将不经过JSON.stringify的格式化，也就不能产生缩进的效果，除非字符串本身就含有缩进。因此，尽量给这个函数传递一个对象。、
此外，这个函数将一个json对象转化为一段html代码，因此还需要等于相应的css样式。
2、定义css样式
1 <style> 2 pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } 3 .string { color: green; } /*字符串的样式*/ 4 .number { color: darkorange; } /*数字的样式*/ 5 .boolean { color: blue; } /*布尔型数据的样式*/ 6 .null { color: magenta; } /*null值的样式*/ 7 .key { color: red; } /*key值的样式*/ 8 </style>
3、定义html内容
在html文件中添加一个pre标签，用于显示格式化的json字符串
1 <pre id="result"></pre>
然后调用js代码，对该pre标签进行初始化即可
1 $('#result').html(syntaxHighlight(res)); 2 //其中res最好是对象，这样在函数中就可进行缩进等格式化处理。
