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

所属分类: 网页制作 / HTML/Xhtml 阅读数: 1869
收藏 0 赞 0 分享

将 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中关于form与表单提交操作的资料集合

这篇文章主要介绍了html中form元素与表单提交方面的知识,需要的朋友可以参考一下
收藏 0 赞 0 分享

HTML中表格动态添加_动力节点Java学院整理

这篇文章主要介绍了HTML中表格动态添加的实例代码,需要的的朋友参考下吧
收藏 0 赞 0 分享

在HTML中使用JavaScript实例代码

这篇文章主要介绍了在HTML中使用JavaScript实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

html 基于 canvas 实现的一个截图小demo

本篇文章主要介绍了html 基于 canvas 实现的一个截图小demo,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

快速解决input[type=file]打开时慢、卡顿的问题

下面小编就为大家带来一篇下面小编就为大家带来一篇快速解决input[type=file]打开时慢、卡顿的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

html转换为pdf案例的一些总结(多图推荐)

这篇文章主要介绍了关于html转换为pdf的案例,wkhtmltopdf测试 PhantomJS测试 IText和Flying Sauser等一些知识点都做了详细说明,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
收藏 0 赞 0 分享

HTML网页中插入视频的方法小结

这篇文章主要介绍了HTML网页中插入视频的方法小结,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML实现文本框只读不能修改其中的内容

本文通过实例代码给大家介绍了 HTML实现文本框只读不能修改其中的内容的方法,需要的朋友参考下吧
收藏 0 赞 0 分享

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

本篇文章主要介绍了使用HTML+CSS实现鼠标划过的二级菜单栏的示例,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

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

本篇文章主要介绍了html格式化输出JSON示例(测试接口) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多