JSONデータをHTMLで表示する方法

JSON.stringify(res, null, 2); //resはJSON化されるオブジェクト、2は間隔です

関数構文ハイライト(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>' を返します。
    });
}

<スタイル>
    pre {アウトライン: 1px 実線 #ccc; パディング: 5px; マージン: 5px; }
    .string { 色: 緑; }
    .nu​​mber { 色: ダークオレンジ; }
    .boolean { 色: 青; }
    .nu​​ll { 色: マゼンタ; }
    .key { 色: 赤; }
</スタイル>

<pre id="結果">
</pre>

$('#result').html(構文ハイライト(res));