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

前端  /  管理员 发布于 7年前   153

将 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页面自动清理js、css文件的缓存（自动添加版本号）
    下一条：
    使用HTML+CSS实现鼠标划过的二级菜单栏的示例

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客