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

最新推荐文章于 2024-07-12 11:41:56 发布

coreyC

最新推荐文章于 2024-07-12 11:41:56 发布

阅读量1.6k

点赞数 1

分类专栏： js 文章标签： js处理json json格式化 json格式整理

本文链接：https://blog.csdn.net/coreyC/article/details/97394978

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在使用PHP的时候

想在前台输出 json格式的数据样式方便查看

PHP处理起来稍显麻烦，故此可以使用js 来进行处理

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

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

处理完成之后

coreyC

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html格式化整理输出JSON示例(测试)

在使用PHP的时候想在前台输出 json格式的数据样式方便查看PHP处理起来稍显麻烦，故此可以使用js 来进行处理将 json 数据以美观的缩进格式显示出来，借助最简单的 JSON.stringify 函数就可以了，因为此函数还有不常用的后面2个参数.见MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript...
复制链接

扫一扫

专栏目录