HTMLエンティティ変換(エンコード・デコード)
テキストを名前付き・10進数・16進数のエンティティでHTML用にエスケープし、どのHTMLエンティティも元のテキストに戻します。
HTMLエンティティ変換 — HTMLのエスケープとデコード
テキストを貼り付ければHTML用にエスケープされ、エンティティだらけのHTMLを貼り付ければ元のテキストが戻ってきます。エンコードの対象は、HTMLを壊す5つの文字だけ、ASCII以外のすべての文字、またはすべての文字から選べ、書き方も名前、10進数、16進数から選べます。デコードはHTML5のすべての名前付きエンティティと数値のエンティティに対応しています。ブラウザーがWebページを読むときと同じパーサーを使っているからです。
テキストをHTMLに入れる場面では、必ずエスケープが問題になります。ページに表示するコメント、テンプレートに入れる商品名、ブログ記事のコード例などです。エスケープしないと、紛れ込んだ小なり記号はタグの始まりに、アンパサンドはエンティティの始まりになり、書いたものとは違う内容が表示されます。最悪の場合は、何かが実行されてしまいます。
使い方
- エンコードかデコードを選びます。
- テキストを入力するか貼り付けます。入力に合わせて結果が表示されます。
- エンコードする場合は、対象と書き方(名前、10進数、16進数)を選びます。
- コピーを押します。入れ替えを押すと、結果を逆方向に変換できます。
重要な5つの文字
| 文字 | 名前 | 数値 | エスケープが必要な理由 |
|---|---|---|---|
& | & | & | すべてのエンティティの始まりになる |
< | < | < | タグの始まりになる |
> | > | > | タグの終わりになる。慣例としてエスケープする |
" | " | " | ダブルクォートで囲んだ属性値の終わりになる |
' | HTML 4にはなし | ' | シングルクォートで囲んだ属性値の終わりになる |
このツールの既定の設定であるこの5文字だけのエンコードは、テンプレートエンジンが出力をエスケープするときと同じ処理です。アクセント付きの文字や絵文字を含め、それ以外の文字はUTF-8のページならそのままで構いません。
より多くの文字をエンコードする場合
- ASCII以外のすべての文字:メールのテンプレートや、UTF-8を確実に扱えるとは限らないシステム向けです。文字コードの取り違えがあっても、éや€が化けずに残ります。
- すべての文字:役に立つことはまれです。ソース上でテキストが読めなくなるため、単純なスクレイパーからメールアドレスを隠す目的で使われることがあります。
- ノーブレークスペース:ノーブレークスペースもエンコードにチェックを入れると、ソース上で普通のスペースと見分けがつくようになります。
名前か数値か
ブラウザーにとって、é、é、éは同じ文字です。名前はソースコード上で読みやすいものの、名前を持つのは一部の文字だけです。このツールは、どのブラウザーやメールクライアントでも解釈できるHTML 4の名前を使い、絵文字のようにそれ以外の文字は数値で書きます。16進数は、U+00E9のようなUnicodeのコードポイントの一般的な書き方と一致します。
安全なデコード
デコードは、ページから切り離されたテキストボックスの中で、ブラウザーのHTMLパーサーが行います。そこではタグはただのテキストです。そのため、貼り付けた<script>や、onerror属性を持つ画像は表示されるだけで、実行されることはありません。また、デコーダーは実際のページとまったく同じように動作します。末尾のセミコロンを省いた古いエンティティを寛容に扱う点も同じです。
関連ツール
HTMLではなくURLの中のテキストには、URLエンコーダーを使ってください。バイナリデータにはBase64エンコーダーが便利です。タスクページでは、このツールを1つの作業に絞って開けます:HTMLエスケープとHTMLエンティティのデコード。エスケープしたタイトルや説明文をメタタグやOGPタグに書き込むには、メタタグ生成ツールを使ってください。