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

HTML 用にテキストをエスケープし、エンティティをテキストに戻します。

このツールについて

<、>、&、引用符、さらに任意で非 ASCII 文字をすべてエスケープして HTML に安全に埋め込めるテキストにしたり、&amp;、&eacute;、&#x1F680; のような名前付き・数値エンティティをプレーンテキストに戻したりできます。

使い方

  1. HTML 用にテキストをエスケープするなら「エンコード」、エンティティを文字に戻すなら「デコード」を選びます。
  2. テキストを貼り付けます。
  3. 任意で、すべての非 ASCII 文字を数値エンティティとしてエンコードします。
  4. 結果をコピーします。

よくある質問

HTML ではどの文字をエスケープする必要がありますか?
& と < は常に、> は念のため、" と ' は属性値の中でエスケープします。この 5 つをエスケープすれば、ユーザーのテキストを HTML に安全に表示できます。
エスケープで XSS を防げますか?
出力を文脈に合わせてエスケープすることは、HTML のテキストや属性に対する防御の基本です。ただし、script タグの中、イベントハンドラー属性、URL では十分ではなく、それぞれに専用のエンコードが必要です。
アクセント付きの文字はエンコードが必要ですか?
ページが UTF-8 で配信されていれば不要で、最近のページはほぼすべて UTF-8 です。非 ASCII 文字をすべてエンコードするのは、UTF-8 を扱えないシステムの場合にのみ役立ちます。
&nbsp; と通常のスペースの違いは?
&nbsp; はノーブレークスペース(U+00A0)です。通常のスペースと違い、ブラウザーはそこで行を折り返さず、複数続いても 1 つにまとめません。「10 km」のような値を離さずに表示したいときに使います。レイアウトや余白には、&nbsp; を並べるのではなく CSS を使ってください。
アポストロフィには &apos; と &#39; のどちらを使うべき?
どちらも HTML5 と XML で使えますが、&apos; は HTML 4 には含まれていなかったため、古いパーサーや一部のメールクライアントは認識しません。&#39; はどこでも使えるため、このエンコーダーはこちらを使います。ダブルクォートで囲んだ属性の中では、アポストロフィをエスケープする必要はまったくありません。
HTML エスケープと URL エンコードの違いは?
HTML エスケープは HTML の中でテキストを安全にし、URL エンコードは URL の中でテキストを安全にします。href 属性内のリンクには両方が必要です。まず各クエリの値をパーセントエンコードし、次に URL 全体を HTML エスケープすると、パラメーター間の & はすべて &amp; になります。パーセントエンコードの段階は URL ツールで行えます。

HTML エンティティとは?

HTML エンティティは、ある文字を表す短いテキストです。& で始まり、セミコロンで終わります。名前付きエンティティは、& を表す &amp; や © を表す &copy; のように単語を使います。数値エンティティは Unicode のコードポイントを使い、&#169; のような 10 進数か、&#xA9; のような 16 進数で書きます。ブラウザーはページを描画するときにそれらを実際の文字に置き換えるため、マークアップ自体はプレーンな ASCII のままにできます。

エンティティは 2 つの問題を解決します。1 つ目は、HTML がマークアップとして解釈してしまう文字を表示できることです。そのままの < はタグの開始になり、単独の & はエンティティの開始になります。2 つ目は、キーボードやファイルのエンコーディングで扱えない文字を書けることです。HTML5 では 2,000 個以上の名前付きエンティティが定義されており、🚀 を表す &#x1F680; のような絵文字を含め、あらゆる Unicode 文字を数値エンティティとして書けます。

JavaScript で HTML をエスケープする方法

ブラウザーでユーザーのテキストを表示する最も安全な方法は、そもそも HTML 文字列を組み立てないことです。innerHTML ではなく element.textContent を設定すれば、ブラウザーは値をテキストとして扱います。React、Vue、Svelte、Angular も、埋め込まれた値をデフォルトでエスケープします。リスクが戻ってくるのは、自分で管理していないデータに innerHTML、dangerouslySetInnerHTML、v-html を使った瞬間で、現代のアプリの XSS バグのほとんどはここから始まります。

テンプレートやメール本文のためにエスケープ済みの文字列が本当に必要な場合は、5 つの特殊文字を置換します。まずアンパサンド、次に <、>、ダブルクォート、シングルクォートの順です。& を最初にエスケープすることが重要で、そうしないと &lt; が &amp;lt; になってしまいます。この HTML エスケープツールは「エンコード」モードでまさにこの処理を行い、シングルクォートは &#39; と書きます。データベースや API から来た文字列が実際に何を含んでいるかを確認するには、「デコード」を使ってください。

ページに &amp;amp; と表示されるのはなぜ? 二重エスケープの直し方

ページに &amp; や &quot; がそのままのテキストとして表示される場合、その文字列は 2 回エスケープされています。典型的には、値が保存前にエスケープされ、テンプレートが出力時にもう一度エスケープしています。1 回目で & が &amp; になり、2 回目でそれが &amp;amp; になり、ブラウザーはそれを &amp; と表示します。代わりに HTML をエスケープしてくれる RSS フィード、CMS のフィールド、JSON API でも同じことが起こります。

解決策は、HTML に書き込む時点で 1 回だけエスケープし、それ以外の場所では生のテキストを保存することです。既存のデータを整理するには、「デコード」モードで貼り付けてください。1 回ごとに 1 層が取り除かれるので、エンティティが残っていればもう一度実行します。デコードには textarea 要素に対するブラウザーのパーサーを使うため、タグやスクリプトを実行せずにエンティティを読み取れます。変更前後のバージョンを比較するには、テキスト差分を使ってください。

よく使う HTML エンティティ

HTML でエスケープが必要な文字と、よく調べられる記号文字です。

文字名前付きエンティティ数値エンティティ
&&amp;&#38;
<&lt;&#60;
>&gt;&#62;
"&quot;&#34;
'&apos;&#39;
ノーブレークスペース&nbsp;&#160;
©&copy;&#169;
®&reg;&#174;
™&trade;&#8482;
€&euro;&#8364;
£&pound;&#163;
°&deg;&#176;
×&times;&#215;
÷&divide;&#247;
–&ndash;&#8211;
—&mdash;&#8212;
…&hellip;&#8230;
«&laquo;&#171;
»&raquo;&#187;
→&rarr;&#8594;
←&larr;&#8592;
✓&check;&#10003;

うまく動かない、または結果がおかしいですか? このツールの問題を報告