HTML エンティティ解析 — 名前付き / 10進 / 16進 / Unicode 名を並列表示

エンティティが含まれるテキストが示すコンテキスト

「é の HTML エンティティを確認したい」という操作は、HTML テンプレートや CMS の本文、メールの HTML 化、ログに出力されたエスケープ済みテキストを扱っているときに生まれます。これらのテキストには、ユーザーの入力した内容、API レスポンスに含まれる個人情報、社内文書の断片が含まれることがあります。エンティティのインスペクターに「どんなエンティティが入っているか調べたい」テキストを貼り付ける行為は、そのテキストの内容ごと外部に渡すことになります。

特に「エスケープ済みのログ」を貼って解析するケースでは、本来サニタイズの対象だった機微情報 (メールアドレス、トークン文字列、内部 URL) がエンティティ化されたままテキストに残っていることが多いです。エンティティ部分だけを抜き出して見るつもりでも、構造として周囲のテキスト全体が一緒に外部へ流れる点に注意が必要です。

参照系ツールでも実際にはサーバー往復している実装が多い

辞書・リファレンス・チートシートの類のツールは「データを送っていない」感じを与えますが、実装の多くは入力された文字列をサーバーに POST して結果を返す構造を採っています。クライアントサイドのみで処理する実装と、サーバー側でログを残せる実装の見分けは、UI からはほぼ不可能です。

利用規約に「ユーザー入力データを統計目的で保持する」「サービス改善のために匿名化したログを生成する」といった条文が含まれているケースは珍しくなく、ユーザー側はそれを毎回読まずに使うのが現実です。インスペクタやリファレンスツールほど「軽い参照」のつもりで貼ってしまうため、構造的な情報流出の判断が後回しになりがちです。

WHATWG HTML5 仕様の 2125 エンティティをバンドルする仕組み

このツールは WHATWG HTML5 仕様で定義されている 2125 件の名前付きエンティティをビルド時のバンドルに含めています。入力テキストのパース・エンティティ検出・各形式への変換はすべてブラウザのメモリ内で実行され、外部 API への問い合わせは発生しません。名前付きエンティティの有無の判定は O(1) のハッシュマップ検索で行われます。

数値参照 (10 進 &#XXXX; / 16 進 &#xXXXX;) の変換は parseInt() でコードポイントを取得し String.fromCodePoint() で文字に戻す操作で、辞書引き不要です。DevTools の Network タブを開いてエンティティを入力しても、リクエストが発生しないことを確認できます。

HTML コードのエンティティ使い分けチェックリストとして

HTML ソースに特殊文字を書き込む際、「名前付き」「10 進数値参照」「16 進数値参照」のどれを使うかは、可読性・互換性・対応文字の有無で変わります。本ツールで確認してから使う形式を決めると、「™ の名前があるのに ™ を使っていた」「&CounterClockwiseContourIntegral; は名前が長すぎるので数値参照の方が実用的」といった判断を素早く行えます。プロダクションコードには 16 進数値参照が安全 (あらゆるコードポイントに対応)、人間が編集するソースには名前付きが可読性が高い、という使い分けの基準として活用してください。

WHATWG パーサが許容するセミコロン省略

HTML5 仕様 (WHATWG) は 後方互換のため、特定の名前付きエンティティでセミコロンを省略できる という独特な挙動を定義しています。たとえば &amp (セミコロンなし) は & と同じく & にデコードされ、これは古い HTML 文書を壊さないための互換性条項です。許可されているのは 100 件強の歴史的に古い名前 (&amp / &lt / &gt / &quot / &copy / &reg など) で、新しいエンティティ (&CounterClockwiseContourIntegral など) はセミコロン必須です。

このセミコロン省略は URL 内で意図しないデコードを起こす 罠でもあります。?param=foo&copy=bar という URL を HTML 属性に書くと、ブラウザは &copy を © と解釈して ?param=foo©=bar のように展開してしまいます。対策は属性値内では & を必ず & にエスケープすること。本ツールで「セミコロンなしでデコードされる名前」をチェックしておけば、URL を直に書く際の落とし穴に気付けます。

XML / SVG / MathML での扱いの違い

HTML が許容する 2125 件の名前付きエンティティのうち、XML が標準で認識するのはたった 5 件 だけです: & / < / > / " / '。SVG や XHTML を XML として処理する場合、© や ™ を書くとパーサが「未定義のエンティティ」としてエラーを返します。回避策は (a) DTD 宣言で必要なエンティティを定義する、(b) 数値参照に書き換える、のどちらかです。

XML 互換が必要なドキュメント (SVG ファイル、Atom フィード、XHTML 配信、EPUB 内部 XML) では、最初から数値参照 © で統一するのが安全です。MathML はさらに独自のエンティティ集合を持っており、⁢ のような MathML 専用名は HTML パーサにも認識されますが、これは WHATWG 仕様で MathML / SVG コンテキストを特別扱いしているからです。XML サブツリーをスクリプトで生成する際は、本ツールで対象文字の数値参照形式 (&#xXXXX;) を確認しておくと汎用性が高くなります。文字列全体を一括 encode / decode したいときは html-encode で双方向に切り替えられ、含まれる文字が NFC / NFD で揺れていないかを確認するときは unicode-normalize で 4 種類の正規化形式を見比べると、エンティティ名と Unicode 名の対応がきれいに揃います。