JavaScript プリティプリント JSON
Valentine Kagwiria
2023年10月12日
-
JavaScript で
JSON.stringify()を使用して JSON をきれいに出力する - JSON 構文を強調表示する
-
JavaScript で
JSON.parse()を使用して JSON をきれいに出力する - JSON 配列を使用する
この記事では、JavaScript で JSON をきれいに出力する方法の概要を説明します。
JavaScript で JSON.stringify() を使用して JSON をきれいに出力する
JSON.stringify() 引数を使用すると、コンテンツをきれいに出力して表示でき、ユーザーは読みやすさに適した間隔を設定できます。
これを行うには、次のように文字列変数を設定します。
var prettyString = JSON.stringify(obj, null, 2); // spacing level = 1.5
JSON 構文を強調表示する
JSON 構文を強調表示する必要がある場合は、関数を作成して正規表現コードを含める必要があります。
function prettyString(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 str1 = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
str1 = 'key';
} else {
str1 = 'string';
}
} else if (/true|false/.test(match)) {
str1 = 'boolean';
} else if (/null/.test(match)) {
str1 = 'null';
}
return '<span class="' + str1 + '">' + match + '</span>';
});
}
JavaScript で JSON.parse() を使用して JSON をきれいに出力する
上記のメソッドは json.stringify() を使用し、JSON オブジェクトではうまく機能しますが、JSON 文字列では機能しません。JSON 文字列をきれいに出力するには、最初にそれをオブジェクトに変換する必要があります。
var string1 = '{"program":"code"}';
var prettyPrint = JSON.stringify(JSON.parse(string1), null, 2);
正しく表示されるように、文字列を HTML タグ <pre> と </pre> でラップしてください。
JSON 配列を使用する
または、JavaScript で JSON 配列を使用することもできます。これは単純で、余分な計算を必要としないため、特に数回繰り返されると、プログラムの速度が低下する可能性があります。
例えば：
JSON.stringify(jsonobj, null, '\t')
これは、<pre> および </pre> タグでも使用する必要があります。