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

将 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>
     

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！