HTML ページで JSON データを表示およびフォーマットする方法

JSONデータはHTMLページ上に表示されフォーマットされます

1. 表示効果図

説明：

すべてのキー値は赤でマークされ、重要なパラメータを示しています。
値は異なる色でマークされます。数値はオレンジ色、文字列は緑色、ブール値は青色です。。。

2. ソースコードの表示

<!DOCTYPE html>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
 <スタイル>
    pre {アウトライン: 1px 実線 #ccc; パディング: 5px; マージン: 5px; }
    .string { 色: 緑; }
    .number { 色: ダークオレンジ; }
    .boolean { 色: 青; }
    .null { 色: マゼンタ; }
    .key { 色: 赤; }

    .showinfo{
        位置: 絶対;
        背景色: #eef1f8;
        幅: 200ピクセル;
        パディング: 5px;
        境界線の半径: 4px;
        境界線: 1px 実線 #ccc;
        表示: なし;
    }
    .showinfo pre{
        パディング: 5px;
        境界線: 1px 実線 #ccc;
        マージン:0;
    }
    テーブル、th、td{
        border:1px 青一色;
    }
</スタイル>
<script src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

    $(ドキュメント).ready(関数(){
        $(".show-rough").mouseover(function(){
            var left = $(this).offset().left + $(this).width() +20; //div の表示位置を計算します var top = $(this).offset().top + 20;
            var _jsonDate = $.parseJSON($(this).text());
            var showJson = syntaxHighlight(_jsonDate);
            $("#show-info").css({"left":left,"top":top}).show();
            $("#show-pre").html(showJson);
        });
        $(".show-rough").mouseout(function(){
            $("#show-info").hide().html();
            $("#show-pre").html();
        })
    });
    //jsonデータを処理し、正規表現を使用して異なるタイプのパラメータをフィルタリングします。function syntaxHighlight(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>
<本文>
<テーブル>
    <頭>
        <tr>
            <th>名前</th>
            <th>JSON データ</th>
        </tr>
    </thead>
    <t本文>
        <tr>
            <td>小三</td>
            <td class="show-rough">{ "name": "小三", "address":"北京路23号","age":16, "email": "[email protected]","Object":[{"Position":"Manager"}],"del":[] }</td>
        </tr>
        <tr>
            <td>小四</td>
            <td class="show-rough">{ "name": "シャオ・シ", "address":"No. 01 Shanghai Road","age":27, "email": "[email protected]","Object":[],"del":[] }</td>
        </tr>
    </tbody>
</テーブル>
<div id="show-info" class="showinfo">
    <pre id="show-pre">

</pre>
</div>
</本文>
</html>

3. ソースコードのアップロード

ソースコードのダウンロードアドレス

JSON データを表示して HTML ページでフォーマットする方法に関するこの記事はこれで終わりです。JSON データを表示して HTML ページでフォーマットする方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CSS3に基づいてiPhoneを描く

>>: Dockerコンテナは定期的にデータベースをバックアップし、指定されたメールボックスに送信します（設計アイデア）