HTMLエンティティが含まれているJSON文字列をパースするには、HTMLエンティティを適切な文字に変換する必要があります。JavaScriptの組み込み関数である decodeURIComponent と encodeURIComponent を使用して、この問題を解決できます。
HTMLエンティティとは
HTMLエンティティとは、HTML上で特殊な文字や記号を表示するための記述方法です。HTMLエンティティは、主に以下の3つの目的で使用されます。
- 予約文字の表示: HTMLでは、特定の文字が特殊な意味を持つため、それらを通常の文字として表示するためにはHTMLエンティティ（エスケープ）が必要です。例えば、
<や>はHTMLタグを開始・終了するための記号ですが、これらの記号自体を表示したい場合は、それぞれ<や>というHTMLエンティティを使用します。 - 特殊な記号の表示: HTMLエンティティを使用することで、キーボード上に存在しない特殊な記号や文字を表示することができます。例えば、コピーライト記号 (©) を表示するためには
©というHTMLエンティティを使用します。 - 非ASCII文字の表示: HTMLエンティティは、ASCII範囲外の文字を表示するためにも使用されます。これは、特に異なる文字コードを扱う際に有用です。例えば、ユーロ記号 (€) を表示するためには
€というHTMLエンティティを使用します。
HTMLエンティティは、一般的に & で始まり、; で終わる記述形式を取ります。エンティティ名 (&name;) またはエンティティ番号 (&#number;) の形式で記述することができます。エンティティ名の方が覚えやすいかもしれませんが、すべての文字にエンティティ名が定義されているわけではありません。そのため、特定の文字を表示するためにはエンティティ番号を使用する必要がある場合もあります。
以下にいくつかの例を示します：
<または<は<を表示します。>または>は>を表示します。&または&は&を表示します。©または©は©を表示します。€または€は€を表示します。
これらのエンティティをHTML内に記述することで、ブラウザはそれを対応する特殊文字や記号として解釈し、その内容を適切に表示します。
コード
まず、文字列をURIコンポーネントとしてエンコードし、その後でデコードすることでHTMLエンティティを適切な文字に変換します。しかし、decodeURIComponent はURIコンポーネントとして正しくない文字列をデコードできないため、encodeURIComponent を使用して文字列をエンコードする必要があります。
以下にコードを記載します。
let jsonString = '{"name":"システム1","image":"image1.png","url":"https://hanlabo.co.jp"}';
// HTMLエンティティを適切な文字に変換
let decodedString = decodeURIComponent(encodeURIComponent(jsonString).replace(/%26%23(\d+)%3B/g, function(match, dec) {
return String.fromCharCode(dec);
}));
let jsonObj = JSON.parse(decodedString); // JSON形式の文字列をJavaScriptのオブジェクトに変換
console.log(jsonObj); // 確認のためにログに出力
解説
ここで、正規表現 %26%23(\d+)%3B はHTMLエンティティを検出し、その数値部分をキャプチャします。replace 関数の第二引数は関数となっており、該当するHTMLエンティティを該当する文字に置き換えます。この関数は、マッチした全体と、括弧によってキャプチャされた部分（この場合はHTMLエンティティの数値部分）を引数に取ります。
以上のコードによって、HTMLエンティティが適切な文字に変換され、その結果の文字列は JSON.parse によって正しくパースされるはずです。
