tigtools

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

HTML内に安全に配置できるようテキストを変換したり、& や é などのエンティティを通常の文字に戻したりできます。

ブラウザー内で動作 登録不要

方向

& < > " と ' は常にエスケープされます。その他の文字は、ASCII以外の文字を変換するオプションを選んだ場合にのみ変換されます。

使い方

  1. テキストをHTMLで安全に使うには「エンコード」を、エンティティを文字に戻すには「デコード」を選びます。
  2. エンコードする場合は、アクセント付き文字や記号をそのまま残すか、エンティティに変換するかを選びます。
  3. テキストを入力または貼り付けると、結果がすぐに更新されます。
  4. 結果をコピーするか、「出力を入力にする」を使って、元のテキストにデコードできるか確認します。

仕組み

HTML では、一部の文字に特別な意味があります。< はタグの開始、& は文字参照の開始を示し、" や ' は属性値を囲みます。これらをテキストとして表示するには、文字参照として記述する必要があります。< は &lt;、> は &gt;、& は &amp;、" は &quot;、' は &#39; と記述します。HTML 4 では &apos; が定義されていないため、アポストロフィには数値形式を使います。

アクセント付き文字、中国語のテキスト、絵文字など、その他の文字はすべて、ページを UTF-8 で保存・配信すればそのまま記述できます。UTF-8 は現在のウェブサイトの標準です。文字参照への変換が必要なのは、一部の古いメールテンプレートやデータベースなど、UTF-8 に対応していないシステムを使う場合に限られます。その場合は、一般的な名前がある文字には名前付き文字参照(それ以外は数値形式)を使うか、すべての文字に &#xE9; のような数値文字参照を使えます。

デコードには、ブラウザーの HTML パーサーを使いません。HTML 4.01 の名前付き文字参照252個、&apos;、よく使われる HTML5 の名前付き文字参照約30個を含む組み込みテーブルと、10進数・16進数の文字参照を使います。数値文字参照は HTML5 のルールに従います。&#0;、サロゲート値、U+10FFFF を超える値は置換文字 � になり、128~159 の値は Windows-1252 として解釈されるため、&#150; は en dash になります。ブラウザーと同様に、&amp や &copy のような一部の旧形式の名前は、末尾のセミコロンなしでも受け付けます。HTML5 では2,000を超える名前が定義されています。テーブルにないまれな名前は変換せず、その一覧を表示します。

HTML に挿入する前にテキストをエスケープすることは、クロスサイトスクリプティング(XSS)への重要な対策です。ただし、この方法が適切なのは要素の内容と、引用符で囲まれた属性値に限られます。<script> ブロック内、style 属性内、URL 内に配置するテキストには、別のエスケープ方法が必要です。

使用例

ウェブページにコードを表示する

ブログ記事で <div class="box"> をテキストとして表示するには、&lt;div class=&quot;box&quot;&gt; に変換します。ブラウザーは要素を作成せず、元のタグを表示します。

古いメールテンプレート用にテキストを整える

「使用可能な場合は名前付き文字参照を使う」を選択すると、「Café – 5 €」は Caf&eacute; &ndash; 5 &euro; に変換されます。メールが UTF-8 以外の文字セットで送信されても、正しく表示できます。

スクレイピングやエクスポートしたテキストを整える

CMSのエクスポートには、Fish &amp; Chips &#8211; &pound;9 と含まれています。デコードすると Fish & Chips – £9 になり、スプレッドシートに貼り付けられます。

よくある質問

HTMLでエスケープが必要な文字はどれですか?

要素のコンテンツでは、& と < をエスケープする必要があります(> もエスケープすることをおすすめします)。属性値では、値を囲む引用符もエスケープしてください。どこでも5つすべて(& < > " ')をエスケープするのが、このツールが採用する簡単で安全なルールです。

名前付きエンティティと数値文字参照の違いは何ですか?

&copy; のような名前付きエンティティは読みやすい一方、使える文字は限られています。&#169;(10進数)や &#xA9;(16進数)のような数値文字参照は、絵文字を含むすべてのUnicode文字に使えます。

&nbsp; をデコードすると、スペースのように見えるのはなぜですか?

&nbsp; はノーブレークスペース(U+00A0)です。通常のスペースのように見えますが、そこでの改行を防ぎ、HTMLで連続する空白として折りたたまれません。通常のスペースとは別の文字なので、テキストの比較や検索では違いが重要になります。

é のようなアクセント付き文字もエンコードする必要がありますか?

ページがUTF-8(<meta charset="utf-8">)を使っているなら、必要ありません。現代のページのほとんどはUTF-8です。既定の設定のままにすれば、特殊文字5つだけがエスケープされます。

エンコードすればXSSを防げますか?

HTMLの要素コンテンツや、引用符で囲まれた属性値に挿入する信頼できないテキストには十分です。JavaScriptコード、CSS、引用符で囲まれていない属性、href="javascript:…" のようなURLには不十分で、それぞれの文脈に応じた処理が必要です。

プライバシー

エンコードとデコードはブラウザー内で文字列操作のみを使って行います。テキストがHTMLとしてレンダリングされたり、アップロード、保存、アナリティクスに含まれたりすることはありません。