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

将 json 数据以美观的缩进格式显示出来，借助最简单的 JSON.stringify 函数就可以了，因为此函数还有不常用的后面2个参数。

见MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify 的描述。

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

示例代码如下：

    

        <meta>

 

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

        function syntaxHighlight(json) {

            if (typeof json != 'string') {

                json = JSON.stringify(json, undefined, 2);

            }

            json = json.replace(/&/g, '&').replace(/, '<').replace(/>/g, '>');

            return json.replace(/("(\u[a-zA-Z0-9]{4}|\[^u]|[^\"])*"(s*:)?|(true|false|null)|-?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 + '';

            });

        }

 

    </script>

    

    

 

    <pre class="brush:php;toolbar:false;">

 

    

    <script style="color:#f60; text-decoration:underline;" title="javascript" href="https://m.php.cn/zt/15724.html" target="_blank">javascript"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;songResJson={&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"service":&nbsp;"ALL",&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"qt":&nbsp;581,&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"content":&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"answer":&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"song":&nbsp;"&#22914;&#26524;&#32536;&#21482;&#21040;&#36935;&#35265;",&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"album":&nbsp;"&#22914;&#26524;&#32536;&#21482;&#21040;&#36935;&#35265;",&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"artist":&nbsp;"&#21556;&#22855;&#38534;&nbsp;&#20005;&#33402;&#20025;",&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"pic_url":&nbsp;"http://p1.music.126.net/-u3WgIXsFNCW7d8Jy7pCEA==/5921969627395387.jpg"&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"scene":&nbsp;"music"&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('result').innerHTML&nbsp;=&nbsp;syntaxHighlight(songResJson); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;$('#result').html(syntaxHighlight(songResJson)); &nbsp;&nbsp;&nbsp;&nbsp;</script>           

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！