HTMLエスケープ/アンエスケープ
HTMLで意味を持つ文字(< > & " ')を実体参照に変換、またはエスケープを元に戻します。コード片を記事に貼るときに。ブラウザだけで動くので、入力内容は外に出ません。
例(クリックで試す)
貼り付けると、< などの実体参照が含まれるかでエスケープ/アンエスケープを自動判定します。
(テキストを入力すると変換結果が出ます)
HTMLエスケープ/アンエスケープの使い方
上のテキストエリアに変換したい文字列を入力すると、即座に変換結果が表示されます。はじめての方は入力欄の上にある「例(クリックで試す)」のボタンを押すと、サンプルと変換方向がセットされ結果がすぐ出ます。セグメントボタンでモードを手動で切り替えることもできます。
例:記事に貼りたい <p class="x">A & B</p> をエスケープすると、<p class="x">A & B</p> になります。これをそのままブログに貼れば、タグとして解釈されず文字どおりに表示されます。逆にアンエスケープすれば元の <p class="x">A & B</p> に戻せます。
- エスケープ:
< > & " 'を実体参照(<など)に変換します。&を最初に処理するので、変換で作った実体参照が二重変換されることはありません(エスケープ済みの文字列を再変換すると&も対象になります)。 - アンエスケープ:実体参照を元の文字に戻します。名前付き実体参照と数値実体参照(
A/A)の両方に対応します。 - ⇅ 入れ替え:変換結果を入力欄にセットして、続けて逆変換できます。
こんな場面で便利です
- ブログやドキュメントにHTMLコード片をそのまま貼っても崩れないようにする
- 掲示板やコメント欄に
<や>を含む文章を投稿する - 取得したHTMLソースの
&などを読みやすい文字に戻す - テンプレートやJSON内に埋め込まれたエスケープ済み文字列を確認する
よくある質問
入力したテキストはサーバーに送信されますか?
いいえ。エスケープ・アンエスケープの処理はすべてお使いのブラウザ内で完結し、入力内容が外部に送信・保存されることはありません。機密情報も安心してご利用いただけます。
どの文字がエスケープされますか?
HTMLで特別な意味を持つ「&」「<」「>」「"」「'」の5文字を、それぞれ「&」「<」「>」「"」「'」に変換します。「&」を最初に処理する順序なので、1回の変換で作られた実体参照がさらに二重変換されることはありません。なお、すでにエスケープ済みの文字列をもう一度エスケープすると「&」も変換対象になります(仕様どおりの動作です)。
数値実体参照のアンエスケープに対応していますか?
はい。「&」などの名前付き実体参照に加えて、「A」のような10進数値実体参照、「A」のような16進数値実体参照も元の文字に復元します。