HTML 形式の JSON 出力の例 (テストインターフェース)

JSON データを美しいインデント形式で表示するには、最も単純な JSON.stringify 関数を使用できます。この関数には、最後に 2 つの珍しいパラメーターがあるためです。

MDN の説明を参照してください https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify。

サンプルコードは次のとおりです。

<html>

    <ヘッド>

        <メタ文字セット="utf-8" />

 

        <title>こんにちは</title>

 

        <スタイル>

            pre {アウトライン: 1px 実線 #ccc; パディング: 5px; マージン: 5px; }

            .string { 色: 緑; }

            .number { 色: ダークオレンジ; }

            .boolean { 色: 青; }

            .null { 色: マゼンタ; }

            .key { 色: 赤; }

        </スタイル>

        <script type="text/javascript">

        関数構文ハイライト(json) {

            if (typeof json != 'string') {

                json = JSON.stringify(json, 未定義, 2);

            }

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

            json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g を返します。function(match) {

                var cls = '数値';

                if (/^"/.test(match)) {

                    if (/:$/.test(match)) {

                        cls = 'キー';

                    } それ以外 {

                        cls = '文字列';

                    }

                } そうでない場合 (/true|false/.test(match)) {

                    cls = 'ブール値';

                } そうでなければ (/null/.test(match)) {

                    cls = 'null';

                }

                '<span class="' + cls + '">' + match + '</span>' を返します。

            });

        }

 

    </スクリプト>

    </head>

    <本文>

 

    <pre id="結果">

 

    </pre>

    <script type="text/javascript">

        var 歌ResJson = {  

              "サービス": "すべて",  

              "qt": 581,  

              "コンテンツ"： {  

                "答え"： {  

                  「歌」：「運命は私たちが出会うまで続くのなら」  

                  「アルバム」：「運命は私たちが出会うまで続くのなら」  

                  "アーティスト": "呉奇龍 ヤン・イーダン",  

                  「pic_url」: 「upload/2022/web/5921969627395387.jpg」 

                },  

                「シーン」：「音楽」 

              }  

            }

            document.getElementById('result').innerHTML = syntaxHighlight(songResJson);

 

        // $('#result').html(syntaxHighlight(songResJson));

    </スクリプト>

     

    </本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQL データベースの操作とデータ型

>>: CSS3.0 でネオンボタンアニメーション効果を実装するためのサンプルコード