標籤：test oba blank agent 顯示 orange log 遇見 object
將 json 資料以美觀的縮排格式顯示出來，藉助最簡單的 JSON.stringify 函數就可以了，因為此函數還有不常用的後面2個參數。
見MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify 的描述。
範例程式碼如下：
<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>
html格式化輸出JSON( 測試介面)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
