HTML
エスケープ後の JSON
使い方とユースケース
HTML 特殊文字や JSON 文字列の特殊文字をエスケープ・アンエスケープします。次のような場面で役立ちます。
- HTML テンプレートに文字列を埋め込む前の
&・<・>・"のエスケープ - JSON 文字列内のバックスラッシュや引用符のエスケープ処理
- エスケープ済みの文字列を元に戻して可読性を確認する（アンエスケープ）
処理はブラウザ内で完結します。入力した文字列はサーバーへ送信しません。
HTML JSONエスケープ＆アンエスケープは、HTMLタグやJavaScriptのコードをJSON文字列としてエスケープしたり、逆にエスケープ済みのJSON文字列を元のテキストへ戻したりするツールです。HTMLの一部をJSONのプロパティ値として埋め込みたいとき、`<`や`"`、改行などをそのまま書くとJSONとして壊れてしまいます。本ツールはJavaScriptの`JSON.stringify`相当の処理で、HTML断片をダブルクォートで囲んだ正しいJSON文字列リテラルに変換し、逆方向の復元（アンエスケープ）にも対応しています。
使い方・サンプル・結果例・注意点
使い方
左側の「HTML」欄にテキストを入力して「エスケープ」を押すと右側の「エスケープ後のJSON」欄にJSON文字列リテラルが表示されます。逆に右側にJSON文字列を入力して「アンエスケープ」を押すと左側に元のテキストが復元されます。
サンプル入力
<div class="card"> <p>こんにちは & ようこそ</p> </div>
結果例
「エスケープ」を押すと、改行が\nに、ダブルクォートが\"に変換され、全体がダブルクォートで囲まれた1行のJSON文字列リテラルとして出力されます。 "<div class=\"card\">\n <p>こんにちは & ようこそ</p>\n</div>" この文字列を右側の欄に置いたまま「アンエスケープ」を押すと、エスケープ前の元のHTMLに戻ります。
注意点
「アンエスケープ」は入力されたテキストをJSON.parseで解釈するため、両端をダブルクォートで囲んだ正しいJSON文字列リテラルである必要があります。ダブルクォートで囲まれていない、またはJSONとして不正な形式の場合は「無効なJSON形式です」というエラーになります。HTMLタグそのもののエスケープ（`<`を`<`に変換するような表示用エスケープ）ではなく、JSON文字列として安全に埋め込むためのエスケープである点にご注意ください。処理はブラウザ内で完結し、入力した文字列はサーバーに送信されません。
こんなときに使えます
- フロントエンドエンジニアが、HTMLテンプレートの一部を設定ファイル（JSON）の文字列値として埋め込む際に、改行や引用符を正しくエスケープする
- API開発者が、レスポンスのサンプルJSONを作成する際、HTML本文を含むフィールド値をエスケープして仕様書に記載する
- テスターが、ログに記録されたJSON形式のエラーメッセージ（エスケープ済みHTML）をアンエスケープして、元のHTML内容を確認する
- コンテンツ編集者が、CMSのカスタムフィールドにHTMLを直接入力できない場合に、JSON文字列としてエスケープしたHTMLを設定値として登録する
よくある質問
「アンエスケープ」でエラーが出るのはどんなときですか？
入力したテキストがJSON文字列リテラルとして正しくない場合（ダブルクォートで囲まれていない、エスケープの記述が不正など）にエラーになります。JSON.stringifyで生成されたような、両端が"で囲まれた形式である必要があります。
HTMLタグの`<`や`>`を`<`や`>`に変換したい場合も使えますか？
本ツールはJSON文字列としてのエスケープ（`\"`や`\n`などへの変換）であり、HTMLエンティティへの変換（`<`→`<`）は行いません。HTMLエンティティ変換が目的の場合は別の表示用エスケープ処理が必要です。
複数行のHTMLを入力してもエスケープできますか？
はい。複数行のテキストを入力しても、改行は\nとしてエスケープされ、1行のJSON文字列リテラルとして出力されます。
シングルクォートはエスケープされますか？
JSON文字列ではシングルクォートはエスケープ対象ではないため、そのまま出力されます。エスケープされるのはダブルクォート、バックスラッシュ、改行などJSON仕様で定められた文字です。