其实JSON.stringify
本身就可以将JSON格式化,具体的用法是:
JSON.stringify(res, null, 2); //res是要JSON化的对象,2是spacing
如果想要效果更好看,还要加上格式化的代码和样式:
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>‘; ???});}
样式代码:
<style> ???pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } ???.string { color: green; } ???.number { color: darkorange; } ???.boolean { color: blue; } ???.null { color: magenta; } ???.key { color: red; }</style>
html代码:
<pre id="result"></pre>
调用代码:
$(‘#result‘).html(syntaxHighlight(res));
效果:
json字符串CSS格式化
原文地址:http://www.cnblogs.com/zoro-zero/p/7491493.html