將json 數據以美觀的縮進格式顯示出來,借助最簡單的JSON.stringify 函數就可以了,因為此函數還有不常用的後面2個參數。
見MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify 的描述。
示例代碼如下:
html;"><html> <head> <meta charset=utf-8 /> <title>hello</title> <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> <script type=text/javascript> 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>'; }); } </script> </head> <body> <pre id =result> </pre> <script type=text/javascript> var songResJson={ service: ALL, qt: 581, content: { answer: { song: 如果緣只到遇見, album: 如果緣只到遇見, artist : 吳奇隆嚴藝丹, pic_url: http://p1.music.126.net/-u3WgIXsFNCW7d8Jy7pCEA==/5921969627395387.jpg }, scene: music } } document.getElementById('result').innerHTML = syntaxHighlight(songResJson) ; // $('#result').html(syntaxHighlight(songResJson)); </script> </body></html>以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。