HTMLエンティティエンコーダー/デコーダー

特殊文字をHTMLエンティティにエスケープ、またはエンティティをプレーンテキストにデコードします。入力するとリアルタイムに反映されます。

すべての非ASCII文字をエンコード
< > & " ' だけでなく、アクセント付き文字や絵文字もエスケープします。

HTMLエンティティが存在する理由

一部の文字はHTML自体によって予約されています。

<>&のような文字はHTMLマークアップにおいて特別な意味を持ちます。ページコンテンツ内にそのまま入力するとページが壊れたり、さらに悪い場合はユーザー入力が実行可能なマークアップとして解釈されてしまうことがあります。&lt;のようなエンティティとしてエンコードすることで、その文字を安全にプレーンテキストとして表示できます。

名前付きエンティティ vs 数値エンティティ

&amp;&#38;はどちらも同じアンパサンドにデコードされます。名前付きエンティティは一般的な文字向けに存在し、数値エンティティ(10進または16進)はあらゆるUnicode文字を表現できます。このツールは両方の形式をデコードします。

仕組み

エンコードは単純な置換処理です。正規表現がHTMLで予約された5つの文字(&<>"')をそれぞれのエンティティに置き換えます。「すべての非ASCII文字をエンコード」オプションはさらに進んで、codePointAtを使ってASCII範囲を超えるすべての文字を数値参照に変換します。これは、古いメールテンプレートシステムやUTF-8を壊してしまう設定ファイルのようなASCII専用の処理経路を出力が通過する必要がある場合に便利です。

デコードには知っておく価値のあるテクニックが使われています。文字列を切り離された<textarea>要素のinnerHTMLに代入し、その.valueから読み戻すという方法です。これによりブラウザ自身のHTMLパーサーに処理を委ねることができ、パーサーはすでに2000以上の名前付きエンティティに加え、あらゆる10進・16進の数値形式を把握しているため、このツールは古くなる可能性のあるルックアップテーブルを持つ必要がありません。これはまた、信頼できない入力をここでデコードしても安全な理由でもあります。textareaの内容は常にプレーンテキストとして扱われるため、デコードされた&lt;script&gt;はscriptタグのテキストになるだけで、何も実行されません。

どちらの方向も、このページのJavaScript内でキー入力のたびに実行されます。入力中にDevToolsのNetworkタブを開いてみてください。リクエストは一切発生せず、あなたのマークアップがブラウザの外に出ることはありません。