HTML エンティティのエンコード — テキストを HTML エンティティにエンコード
特殊文字を HTML エンティティ(&、<、>、©)にエンコードします。完全にブラウザ内で動作します。アップロードや制限はありません。
HTML エンティティのエンコードはデコードの逆方向です。HTML マークアップで特別な意味を持つ(またはキーボードで入力しにくい)文字を、任意の HTML パーサーが認識するエンティティ構文に変換します。HTML コンテンツで必ずエンコードしなければならない 2 つの文字は <、>、&——タグを区切る山括弧と、エンティティを始めるアンパサンド——です。これらをエンコードしないと、HTML パーサーはそれらをコンテンツではなくマークアップとして解釈し、if a < b && b < c のような文字列は壊れたページになります。エンコードが、その文字列を HTML に埋め込んでも安全にしてくれます。
名前付き、数値 10 進、数値 16 進の選択は主に好みの問題ですが、実用上の違いがあります。名前付きエンティティ(&、©)は最も読みやすい形式で、1990 年代に HTML 作者が手書きしていたものです。数値エンティティ(&、&)は普遍的で、約 2,000 の名前付きエンティティだけでなく、すべての Unicode 文字をカバーします。数値 16 進は高いコードポイントに最もコンパクトです(U+1F600 の絵文字は 10 進で 😀、16 進で 😀)。HTML 属性にテキストを挿入する狭いケースでは、HTML セーフのみモードは属性クォーテーションを壊す可能性のある 5 文字(<、>、&、\"、')だけをエンコードし、他のすべてを生の UTF-8 のまま残すので、出力が読みやすい状態が保たれます。
最後に受け渡しについてまとめます。出力先が HTML ドキュメント、または別のドキュメント内の HTML フラグメントであれば、3 つのモードのいずれでも動作します。出力先が HTML を含む JSON 文字列(CMS API やリッチテキストエディタで一般的)であれば、HTML を先にエンコードし、その後文字列全体を JSON エスケープします。出力先が JavaScript のソースコードや CSS ファイルであれば、HTML エンティティは適用されません。代わりに JavaScript 文字列エスケープや CSS 文字列エスケープをご利用ください。本エンコーダーは仕様上 HTML 専用であり、文脈に応じた適切なツールを使うことでデバッグの層を 1 つ減らせます。
使い方
テキストを入力または貼り付ける
テキストを入力エリアにドロップします。エンコーダーは ASCII 文字と数字をそのまま残し、HTML エンティティ等価物を持つ文字のみをエンコードするので、出力が読みやすい状態が保たれます。
エンコードモードを選ぶ
デフォルトは名前付きエンティティ(`&`、`©`)です。数値 10 進(`&`)、数値 16 進(`&`)、または出力先が属性値の場合向けの HTML セーフのみ(`<`、`>`、`&`、`"`、`'` のみをエンコード)に切り替えます。
結果をコピーまたはダウンロードする
エンティティエンコードされたテキストをクリップボードにコピーするか、.html ファイルとしてダウンロードできます。エンコーダーは入力からのすべての空白を保持します。出力をデコーダーでラウンドトリップして検証できます。
よくある質問
どの文字をエンコードすべきですか?
HTML コンテンツでは常に `<`、`>`、`&` をエンコードしてください(これらはマークアップ上の意味を持ちます)。属性値では、`"` と `'` もエンコードしてクォーテーションの破損を防ぎます。名前付きエンティティを持つ他の文字(著作権表示、em ダッシュ、スマートクォート)はエンコードしてもよいし、生の UTF-8 のまま貼り付けてもかまいません。最近のブラウザは両方とも正しくレンダリングします。
名前付きエンティティと数値エンティティの違いは何ですか?
名前付きエンティティは `&`、`©` のようなニーモニックを使用します。数値エンティティはコードポイントを 10 進(`&`)または 16 進(`&`)で使用します。両方は同じ文字にデコードされます。名前付きエンティティはより読みやすいですが、約 2,000 項目に限定されます。数値エンティティは絵文字や稀な文字を含むすべての Unicode 文字をカバーします。
エンコーダーは既存のエンティティを二重エンコードしますか?
はい。エンコーダーは入力をプレーンテキストとして扱います。入力にすでに `&` が含まれている場合、エンコーダーは `&amp;` を生成します。入力がすでに部分的にエンコードされている場合は、デコーダーで先に通すか、マークアップ上有意な文字だけをエスケープしたい場合は HTML セーフのみモードをご利用ください。
出力は CSS や JavaScript でも動作しますか?
CSS は別のエスケープ構文(バックスラッシュと 16 進コード、`\26 ` など)を使います。JavaScript は 16 進には `\u0026`、短縮 16 進には `\x26` を使います。HTML エンティティは HTML コンテンツでのみ機能します。JavaScript や CSS の文脈では、言語固有のエスケープを出力するツールをご利用ください。
エンコードは可逆ですか?
はい。エンコーダーはデコーダーで完全に可逆です。任意の入力をエンコーダーとデコーダーに順番に通せば、元の文字が戻ります。唯一の損失は、エンティティ形式を持たない文字を含む場合です(非常に稀で、ほぼすべての Unicode 文字には少なくとも数値エンティティがあります)。
制限事項
- 二重エンコード検出なしエンコーダーはすべての入力をプレーンテキストとして扱います。`&` という入力は `&amp;` にエンコードされ、`&` にデコードされる(`&` ではない)ことになります。すでにエンコードされたコンテンツが疑われる場合は、先にデコードしてください。
- ASCII 文字はエンコードされませんデフォルトモードでは ASCII 文字と数字はそのまま残されます。すべての文字をエンコードすると出力が読みにくくなり、ファイルサイズが膨らむだけでセキュリティ上の利点はありません。ほとんどの HTML 本文は `<`、`>`、`&`、`"`、`'` をエスケープするだけで問題なく動作します。
- CSS や JavaScript 向けではありませんHTML エンティティは CSS や JavaScript の文脈では機能しません。CSS は `\26 `(バックスラッシュ + 16 進)、JavaScript は `\u0026` を使います。それらの文脈向けのエンコードには、別のツールまたは言語対応のエスケープが必要です。
プラットフォーム別の注意点
- macOS
- TextEdit は保存時に自動エンコードを行いません。ブラウザツールは、HTML フィールドに貼り付けるテキストで、`<` や `>` がマークアップとして解釈されてしまい、レンダリング出力を壊してしまうような場合に適しています。
- Windows
- Notepad や VS Code はデフォルトで HTML を生の UTF-8 として保存します。ブラウザツールは、出力先が HTML 属性値や、生の文字ではなくエンティティを必要とする CMS フィールドである場合に適しています。
- Linux
- コマンドラインで作業する場合は、`python3 -c 'import html; print(html.escape(s))'` が最も近い等価物です。ブラウザツールは、チャットやメール、ドキュメンテーションページから貼り付けたテキストを Python REPL に入力し直すのが現実的でない場合に適しています。
- Web
- 完全にクライアントサイドで動作します。ページの読み込み後はオフラインでも動作します。エンコードされた出力は可搬な HTML であり、送信先のエンコード処理に依存せず、どのウェブページ、CMS フィールド、HTML 属性にもそのまま貼り付けられます。