HTMLエンティティエンコーダー/デコーダー
特殊文字をHTMLエンティティにエスケープ、またはエンティティをプレーンテキストにデコードします。入力するとリアルタイムに反映されます。
HTMLエンティティが存在する理由
一部の文字はHTML自体によって予約されています。
<、>、&のような文字はHTMLマークアップにおいて特別な意味を持ちます。ページコンテンツ内にそのまま入力するとページが壊れたり、さらに悪い場合はユーザー入力が実行可能なマークアップとして解釈されてしまうことがあります。<のようなエンティティとしてエンコードすることで、その文字を安全にプレーンテキストとして表示できます。
名前付きエンティティ vs 数値エンティティ
&と&はどちらも同じアンパサンドにデコードされます。名前付きエンティティは一般的な文字向けに存在し、数値エンティティ(10進または16進)はあらゆるUnicode文字を表現できます。このツールは両方の形式をデコードします。
仕組み
エンコードは単純な置換処理です。正規表現がHTMLで予約された5つの文字(&、<、>、"、')をそれぞれのエンティティに置き換えます。「すべての非ASCII文字をエンコード」オプションはさらに進んで、codePointAtを使ってASCII範囲を超えるすべての文字を数値参照に変換します。これは、古いメールテンプレートシステムやUTF-8を壊してしまう設定ファイルのようなASCII専用の処理経路を出力が通過する必要がある場合に便利です。
デコードには知っておく価値のあるテクニックが使われています。文字列を切り離された<textarea>要素のinnerHTMLに代入し、その.valueから読み戻すという方法です。これによりブラウザ自身のHTMLパーサーに処理を委ねることができ、パーサーはすでに2000以上の名前付きエンティティに加え、あらゆる10進・16進の数値形式を把握しているため、このツールは古くなる可能性のあるルックアップテーブルを持つ必要がありません。これはまた、信頼できない入力をここでデコードしても安全な理由でもあります。textareaの内容は常にプレーンテキストとして扱われるため、デコードされた<script>はscriptタグのテキストになるだけで、何も実行されません。
どちらの方向も、このページのJavaScript内でキー入力のたびに実行されます。入力中にDevToolsのNetworkタブを開いてみてください。リクエストは一切発生せず、あなたのマークアップがブラウザの外に出ることはありません。