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

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

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

1. 表示効果図

説明:

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

2. ソースコードの表示

<!DOCTYPE html>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
 <スタイル>
    pre {アウトライン: 1px 実線 #ccc; パディング: 5px; マージン: 5px; }
    .string { 色: 緑; }
    .nu​​mber { 色: ダークオレンジ; }
    .boolean { 色: 青; }
    .nu​​ll { 色: マゼンタ; }
    .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コンテナは定期的にデータベースをバックアップし、指定されたメールボックスに送信します(設計アイデア)

推薦する

計算機機能を実装するミニプログラム

この記事の例では、計算機機能を実装するためのミニプログラムの具体的なコードを参考までに共有しています...

Tomcat でのサーブレットの作成と実装に関する深い理解

1. サーブレットとは何か1.1. 正式な言葉で説明する:サーブレットは、動的な Web リソースを...

Alibaba Cloud Centos7.3 インストール mysql5.7.18 rpm インストール チュートリアル

MariaDBをアンインストールするCentOS7 ではデフォルトで MySQL の代わりに Mar...

MySQLデータのバックアップとリカバリの実装方法の分析

この記事では、例を使用して MySQL データのバックアップと復元の方法について説明します。ご参考ま...

IDEA の Docker プラグインを介して Springboot プロジェクトを公開する方法の詳細なチュートリアル

1. Dockerfileを書く(1)プロジェクト名を右クリックして新しいテキストファイルを作成し、...

JavaScript でウェブ プレーヤーを実装する

今日は、JavaScript を使用して Web ページ上にプレーヤーを作成する方法を紹介します。誰...

セマンティックHTML構造を理解する方法

HTML と CSS は誰もが知っていると思います。HTML の構造と CSS の表現の分離も知って...

VSCode+CMake+Clang+GCC 環境構築チュートリアル (Win10 の場合)

大学院入試に備えて、C/C++ を使って基本的なデータ構造とアルゴリズムを実装する予定です。アルゴリ...

Nginxはリバースプロキシを使用して負荷分散プロセス分析を実装します

導入dockerコンテナとdocker-composeに基づいて、Linux環境でのdockerの基...

MySQLデータベースは重複データを削除し、メソッドインスタンスを1つだけ保持します

1. 問題の紹介ユーザー テーブルに 3 つのフィールドが含まれているシナリオを想定します。 id、...

vue3 の setUp とリアクティブ関数の使用方法の詳細な説明

1. いつsetUpを実行するかvue3 ではメソッドを正常に使用できるようになったことは誰もが知っ...

HTML テーブル_Powernode Java アカデミー

HTMLで表を描くには、表タグを使用します。 trは行を意味しますtdは列を示すth はテーブ...

EChartsマウスイベント処理方法の詳細な説明

イベントとは、クリック、マウスオーバー、ページの読み込み後にトリガーされる読み込みイベントなど、ユー...

MySQL でのトランザクションの使用方法

基礎トランザクションは、SQL ステートメントのグループに対するアトミック操作です。つまり、グループ...