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

网页制作 2024/5/16 佚名

3 2 1

将 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格式化输出,html,json,格式化

标签：

html,json格式化输出,html,json,格式化

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“html格式化输出JSON示例(测试接口)”

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

暂无“html格式化输出JSON示例(测试接口)”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

20240516

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

html,json格式化输出,html,json,格式化

HTML页面自动清理js、css文件的缓存（自动添加版本号）

使用HTML+CSS实现鼠标划过的二级菜单栏的示例

评论“html格式化输出JSON示例(测试接口)”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接