当前位置：Gxlcms > html代码 > html格式化输出JSON示例(测试接口)

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

时间：2021-07-01 10:21:17 帮助过：78人阅读

将 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示例(测试接口)

人气教程排行