HTMLエスケープ・アンエスケープ(< & " 等)

テキストとHTML実体参照(<や&など)を双方向に変換。名前付きと数値実体(AやA)の両方をデコードでき、テキスト用と属性値用のエスケープの切り替えや、XSS対策としての位置づけも解説します。

HTMLエスケープは「HTMLとして出力する直前」に行うのが原則です。JavaScript文字列リテラルの中やURLのクエリ文字列、CSSの値など文脈が変わればエスケープ方法も変わるため、ここでの変換結果をそのままJSやURLに流用しないでください(別途「URLエンコード」ツールなどを使用します)。

使い方

  1. 「テキスト」欄に文章を入力すると、下の「HTML実体参照」欄に自動でエスケープ結果が表示されます。
  2. 逆に実体参照を含む文字列(<やAなど)を「HTML実体参照」欄に貼ると、デコードされたテキストが上に表示されます。
  3. 属性値(value="..."など)に埋め込む場合は「属性値用」を選ぶと、引用符(" ')も合わせてエスケープされます。

仕組み・根拠

HTML Living Standard(WHATWG)では、HTML文書の中で<や&をそのまま書くとタグの開始やあいまいな文字参照と解釈されてしまうため、テキストとして表示したい場合は文字参照(character reference)に置き換える必要があると定めています。本ツールのエスケープは、テキストノードとして最低限必要な&→&amp;、<→&lt;、>→&gt;を行い、属性値用モードでは属性値の区切り文字と衝突する"→&quot;、'→&#39;も追加します。

デコード側は、名前付き文字参照(&copy;や&nbsp;など、HTML Living Standardが定義するnamed character referencesの一部)と、数値文字参照(10進数の&#65;、16進数の&#x41;。いずれもUnicodeのコードポイントを直接指定する記法)の両方に対応しています。対応していない名前付き参照は「未対応」として原文のまま残し、誤ってデコードしないようにしています。

エスケープの位置づけについて: HTMLエスケープはあくまで「HTML文書の中にテキストとして安全に出力するための処理」であり、XSS対策の万能薬ではありません。出力先の文脈(コンテキスト)によって必要な処理が異なり、JavaScriptの文字列リテラル中に埋め込む場合はJSエスケープ、URLのクエリパラメータに使う場合はパーセントエンコーディング(RFC 3986)、CSSの値に使う場合はCSSエスケープが別途必要です。HTMLエスケープしたからといって、そのままJavaScriptの<script>ブロック内やイベントハンドラ属性(onclick="..."など)に安全に埋め込めるとは限らない点が実務上の落とし穴です。

現場の落とし穴: エスケープは「出力する直前(テンプレートエンジンやビューの描画時)」に一度だけ行うのが原則です。入力受付時やDB保存時にエスケープしてしまうと、二重エスケープ(&amp;amp;のような表示崩れ)や、別の出力先(APIレスポンスのJSONなど)でエスケープが不要な場面での不整合が起きやすくなります。

よくある質問

Q. すべての名前付き実体に対応していますか?

A. いいえ、HTML Living Standardが定義する数百種類のうち、&copy;``&nbsp;``&mdash;など実務でよく使われる主要なものに限定しています。対応外の実体は原文のまま残り、デコード結果の下に件数が表示されます。

Q. &#39;と&apos;はどちらが正しいですか?

A. &apos;はHTML5(HTML Living Standard)では有効ですが、古いHTML4環境やXHTMLとの互換性を考慮して数値参照の&#39;を使うのが広く採用されている慣習です。本ツールのエンコードも&#39;を出力します。

Q. >は必ずエスケープする必要がありますか?

A. HTML構文上、テキストノード中の>単体は厳密には必須ではありませんが、]]>のような組み合わせや将来的な仕様変更に備え、<と対にして常にエスケープするのが一般的な安全策です。

関連ツール

最終更新・根拠の確認日: 2026-09-10 · カテゴリ: テキスト