html格式化输出JSON示例(测试)

来源：互联网发布：淘宝的淘口令怎么取消编辑：程序博客网时间：2024/06/17 04:38

将 json 数据以美观的缩进格式显示出来，借助最简单的 JSON.stringify 函数就可以了，因为此函数还有不常用的后面2个参数.
见MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify 的描述。

Code:

<head>    <meta charset="utf-8" />    <title>测试</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>

效果图:

运行效果

以上就是本文的全部内容，希望对大家的学习有所帮助.

阅读全文

1 0