明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

html格式化輸出JSON

發(fā)表時間：2024-05-10 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章主要介紹了html格式化輸出JSON示例(測試接口) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧將 json 數(shù)據(jù)以美觀的縮進格式顯示出來，借助最簡單的 JSON.stringify 函數(shù)就可以了，因為此函數(shù)還有不常用的后面2個參數(shù)。見MDN https:...
本篇文章主要介紹了html格式化輸出JSON示例(測試接口) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

將 json 數(shù)據(jù)以美觀的縮進格式顯示出來，借助最簡單的 JSON.stringify 函數(shù)就可以了，因為此函數(shù)還有不常用的后面2個參數(shù)。

見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的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。

相關(guān)文章