HTML エンティティ変換（エンコード・デコード）
テキストを HTML 用にエスケープし、&entities; を文字に戻します。 処理はすべて端末内で完結し、アップロードは一切ありません。
- 入力
- Text · HTML
- 出力
- Escaped HTML · decoded text
テキスト
66 文字
HTML
102 文字
<p class="note">Fish & chips — £4.50, café crème "très bon" 😀</p>
テキストを HTML 用にエスケープ、またはエンティティを文字に戻す
この HTML エンティティ変換ツールは、そのままではマークアップとして読まれてしまう文字をエスケープし、デコーダーは &、é、€ などのエンティティを元の文字に戻します。名前付き、10 進数、16 進数の参照を選べ、必要な文字だけをエスケープするか、ASCII 以外のすべての文字をエスケープするかも選べます。よく使うエンティティは一覧表で確認できます。すべてブラウザ内で動作し、貼り付けたものがアップロードされることはありません。
HTML エンティティをエンコード・デコードする方法
- テキストを HTML 用にエスケープするならエンコード、エンティティを文字に戻すならデコードを選びます。
- エンコードする場合は、エスケープする対象を選びます。特殊文字のみ（
& < > " '）か、ASCII 以外のすべての文字もです。 - 形式を選びます。名前付き（
é）、10 進数（é）、16 進数（é）です。 - 結果をコピーするか、入力に戻して往復の変換を確認します。一覧表をオンにすると、個々のエンティティをコピーできます。
HTML でエスケープが必要な理由
HTML では < がタグを、& が文字参照を始め、属性の中では引用符が値を終わらせます。これらの文字をテキストとして表示するには、<、&、"、' のようにエンティティで書く必要があります。これを忘れると、コメントに紛れ込んだ「<b」でページの残りがすべて太字になったり、ユーザーからのテキストであればクロスサイトスクリプティング（XSS）が起きたりします。
エスケープは最後の防御線であって、唯一の防御ではありません。React、Vue、Jinja、Blade などのテンプレートエンジンは出力を自動でエスケープします。このツールは、静的な HTML、メールのテンプレート、ドキュメント、CMS の入力欄、システムが実際に保存した内容のデバッグなど、それらが届かない場面のためのものです。
名前付き、10 進数、16 進数の参照
アポストロフィは ' ではなく ' で書きます。' は HTML5 と XML では有効ですが、HTML 4 には含まれておらず、一部の古いパーサーは認識しません。
- 名前付き（é）
- 読みやすく、最も多くの人が見慣れた形式です。HTML5 では約 2,200 の名前が定義されていますが、すべての文字に名前があるわけではなく、名前のない文字は 10 進数で書かれます。
- 10 進数（é）
- Unicode のコードポイントを 10 進数で表したものです。すべての文字に使え、どの HTML・XML パーサーでも動作します。
- 16 進数（é）
- 同じコードポイントを 16 進数で表したもので、Unicode の文字表での書き方（U+00E9）と一致します。
アクセント付き文字や絵文字もエスケープが必要？
現在のほぼすべてのページがそうであるように、UTF-8 で配信されるページなら必要ありません。エスケープが必須なのは 5 つの特殊文字だけで、「café」「日本語」や絵文字はそのまま書けます。特殊文字のみのオプションはこの動作で、HTML を読みやすく保てます。
それでも、出力が UTF-8 に対応していないものを通る場合には、ASCII 以外のすべての文字をエスケープすると役立ちます。ISO-8859-1 や Windows-1252 の古いシステム、一部のメール配信の経路、エンコーディングを制御できないソースファイルなどです。結果は純粋な ASCII になり、どれを通っても崩れません。
デコードの仕組み
デコーダーは、名前付き参照、10 進数（©）と 16 進数（©）の参照を、ブラウザと同じルールで読み取ります。HTML 標準の規定どおり 128 〜 159 の範囲の数値参照は Windows-1252 として読むので、– は en ダッシュになります。無効なコードポイントは置換文字になり、© のようにブラウザがセミコロンなしでも受け付けるいくつかの古い名前もデコードされます。&nbps; のようなタイプミスによる不明な名前はそのまま残し、修正できるよう一覧表示します。
テキストが HTML ではなく URL から来たものなら、代わりに URL デコーダーを使ってください。%3C は HTML エンティティではなくパーセントエンコーディングです。
よくある質問
- HTML エンティティとは何ですか？
- HTML エンティティは、& と ; の間に書く、文字を表すコードです。< や & のように HTML がマークアップとして扱ってしまう文字や、© やノーブレークスペースのように入力しにくい文字を表示できます。
- HTML でエスケープが必要な文字はどれですか？
- 5 つです。& は &、< は <、> は >、ダブルクォートは "、シングルクォートは ' にします。引用符が問題になるのは属性値の中だけですが、どこでエスケープしても害はありません。
- HTML エンティティをデコードするには？
- 「デコード」を選んでテキストを貼り付けてください。名前付き、10 進数、16 進数のエンティティが入力と同時に文字に変換され、不明なエンティティ名は一覧表示されます。
- と通常のスペースの違いは何ですか？
- はノーブレークスペースです。見た目はスペースですが、その位置で行が折り返されるのを防ぎ、複数並んでもブラウザが 1 つにまとめることはありません。10 kg のように、数値と単位の間で役立ちます。
- アポストロフィには ' と ' のどちらを使うべきですか？
- ' はどこでも使えます。' は HTML5 と XML では有効ですが HTML 4 では無効なので、メールや古いシステムには ' の方が安全です。
- HTML をエスケープすれば XSS を防げますか？
- HTML に挿入する前のテキストのエスケープは、クロスサイトスクリプティングに対する中心的な防御ですが、文脈に合わせる必要があります。HTML のテキスト、属性、URL、JavaScript にはそれぞれ専用のエンコードが必要です。自動でエスケープするテンプレートシステムを使うことをおすすめします。
- テキストはサーバーに送信されますか？
- いいえ。エンコードとデコードはすべてブラウザ内で行われます。