devtools-hub

HTML Entity Encoder

HTML特殊文字をエンティティに変換・復元

BOOTHで見る(有料版)
開発者向けテキストHTML

HTMLに埋め込むテキストの特殊文字(< > & " ')をエンティティ形式に即時変換。Decode モードでエンティティをテキストに戻す双方向変換に対応。非ASCII文字(©・→ 等)の数値参照変換オプション付き。

広告

HTML Entity Encoder

Input
Output

Features

  • HTML特殊文字(< > & " ')をエンティティに即時変換
  • エンティティをテキストに戻す Decode モード
  • 非ASCII文字(© → 等)を数値参照に変換するオプション
  • 変換結果をワンクリックでコピー

Desktop Only

有料版のみ

デスクトップ版(BOOTH)でのみ使える機能

  • .html / .txt ファイルのドラッグ&ドロップ読み込み
  • 変換結果を .html / .txt ファイルとして保存(Save As)

Desktop App

デスクトップ版を入手する

Web版にはない機能をデスクトップ版で追加しています。

  • .html / .txt ファイルのドラッグ&ドロップ読み込み
  • 変換結果を .html / .txt ファイルとして保存(Save As)
BOOTH で見る

HTMLエンティティの基礎知識と使いどころ

HTMLソースコードの中で< > & " 'などの文字をそのまま書くとHTMLタグとして解釈されてしまいます。HTMLエンティティはこれらの特殊文字を安全にHTMLに埋め込むための記法です。

なぜエンティティエンコードが必要か

< はタグの開始記号なので、テキストとして「1 < 2」と表示したい場合は&lt;と書く必要があります。&はエンティティの開始記号なのでそのまま書くと無効なエンティティとして解釈されることがあり、&amp;と書きます。XSS(クロスサイトスクリプティング)対策としても、ユーザー入力をHTMLに埋め込む際には必ずエンティティエンコードが必要です。

主なHTMLエンティティ一覧

< → &lt; / > → &gt; / & → &amp; / " → &quot; / ' → &#x27; / スペース → &nbsp; / © → &copy; / → → &rarr; / × → &times; / ÷ → &divide; などがよく使われます。HTML Entity EncoderはこれらをまとめてエンコードしてHTMLに安全に貼り付けられる形式に変換します。

数値参照形式

HTMLエンティティには名前付き参照(&lt;)と数値参照(&#60; または&#x3C;)の2形式があります。名前付き参照は覚えやすく可読性が高いですが、数値参照はどんな文字でもUnicodeコードポイントで表現できます。非ASCII文字(©・→・日本語など)を数値参照に変換するオプションをHTML Entity Encoderで選択できます。

テンプレートエンジンとの関係

React・Vue・AngularなどのJSXやテンプレート構文では、変数を{}や{{}}で埋め込むと自動的にHTMLエンティティエンコードされます(エスケープ)。dangerouslySetInnerHTML(React)やv-html(Vue)を使う場合は自動エスケープが効かないため、手動でエンコードするかDOMPurifyなどでサニタイズする必要があります。

広告

Related Tools

base64-studio

Base64 エンコード & デコード

開発者向けテキストエンコード

使ってみる →

BOOTH

JSON Studio

JSON フォーマッター & バリデーター

JSON開発者向けフォーマッター

使ってみる →

BOOTH

color-deck

カラーコード変換 & パレット保存

カラーデザイン開発者向け

使ってみる →

BOOTH

このツールを共有する