HTML エスケープ
生の HTML とエンティティエンコードされたテキストを相互変換——100% ブラウザ内で完結、アップロード不要。
入力
出力
HTML エスケープとは?
HTML エスケープ(エンティティエンコードとも呼ばれる)は、HTML で特別な意味を持つ文字——&、<、>、"、'——を対応する文字エンティティ参照に置換するプロセスです。例えば小なり記号 < は < になり、& は & になります。エスケープにより、これらの文字が HTML マークアップとして解釈される代わりに、Web ページ上にリテラルテキストとして表示できます。
HTML 仕様は &、<、>、"、' などの名前付きエンティティと、同じ文字を表す数値文字参照(< など)を定義しています。ユーザー生成コンテンツ、コードスニペット、山括弧を含むデータを HTML ドキュメントに挿入する際、エスケープは不可欠です。エスケープされていない < は不要なタグを開始し、ページレイアウトを壊したり XSS 脆弱性を導入したりする可能性があるためです。
HTML をエスケープする場面
特殊文字を含む可能性のあるテキストを HTML コンテキストに挿入する際に HTML エスケープが必要です。一般的なシナリオ:
- コードスニペットの表示。 チュートリアルページで
<div>をリテラルテキストとして表示するには山括弧をエスケープする必要があります。 - ユーザー生成コンテンツ。 コメント、フォーラム投稿、チャットメッセージは XSS 攻撃を防ぐためレンダリング前にエスケープする必要があります。
- テンプレートレンダリング。 サーバー側・クライアント側のテンプレートエンジンは出力を安全に保つためデフォルトで補間値をエスケープします。
- HTML 内の JSON。
<script>タグ内に JSON を埋め込む場合、スクリプトの早期終了を避けるため</をエスケープする必要があります。 - 属性値。
class="…"やdata-*属性内に配置する値は有効性を保つため引用符をエスケープする必要があります。 - メールテンプレート。 HTML メールはクライアント互換性を最大にするため URL とトラッキングパラメータの & をエスケープする必要があります。
エスケープの忘れはクロスサイトスクリプティング(XSS)脆弱性の最も一般的な原因の一つです。エスケープをデフォルトとし、アンエスケープを例外とすべきです。
エスケープとアンエスケープ
エスケープは生の文字をエンティティ参照に変換し、アンエスケープ(デコード)はそのプロセスを逆転させます。本ツールはモードセレクターで両方向をサポートします。「エスケープ」を選択すると & が & に、< が < になります。「アンエスケープ」を選択するとエンティティ参照が元の文字に変換されます。
& は二重エンコードを避けるため常に最初にエスケープする(または最後にアンエスケープする)必要があることに注意してください。本ツールはその順序を自動的に従います。処理される 5 つの文字は:& → &、< → <、> → >、" → "、' → ' です。
一般的な HTML エンティティ
下表は日常の HTML 作業で最も頻繁に遭遇するエンティティを示しています。
| 文字 | エンティティ | 説明 |
|---|---|---|
| & | & | 最初にエスケープ必須;すべてのエンティティの開始 |
| < | < | タグの開始;テキスト内容でエスケープ |
| > | > | タグの終了;テキスト内容でエスケープ |
| " | " | 二重引用符属性内でエスケープ |
| ' | ' | 単一引用符属性内でエスケープ |
| ノーブレークスペース | | 改行と折りたたみを防止 |
| © | © | 著作権記号 |
| → | → | 右矢印 |
’(右シングルクォート)や …(水平省略記号)などの数値参照も有効で、リッチテキストエディタからよく出力されます。
HTML のエスケープ・アンエスケープ方法
本ツールでのテキスト処理は 1 秒で完了し、すべてブラウザ内で行われます。アップロード不要、登録不要、インストール不要。以下の手順で行います:
- モードを選択。 「エスケープ」を選択して特殊文字をエンティティにエンコードするか、「アンエスケープ」を選択してエンティティを文字にデコードします。
- テキストを貼り付け。 変換したい HTML またはテキストを入力ボックスに入力または貼り付けします。
- 「実行」をクリック。 ツールが選択した変換を適用し、結果を出力ボックスにリアルタイムで書き込みます。
- 結果をコピー。 「クリップボードにコピー」をクリックして変換されたテキストをコピーし、HTML、テンプレート、コードに貼り付けます。
すべてのステップは JavaScript でブラウザ内でローカルに実行されるため、テキストがサーバーにアップロードされることはありません。これにより変換は完全にプライベートで高速、ユーザーデータ、トークン、ソースコードなどの機密コンテンツに適しています。
この HTML エスケープツールは無料ですか?
はい、完全に無料で、登録不要、透かしなし、制限なしです。
どの文字をエスケープしますか?
5 つの必須文字:& < > " と '、& < > " ' にマッピングされます。
エンティティのアンエスケープもできますか?
はい。モードセレクターを「アンエスケープ」に切り替えると、エンティティ参照が文字に変換されます。
数値参照を処理できますか?
アンエスケープモードは一般的な名前付きエンティティと典型的なエディタが生成する数値参照を処理します。
入力はアップロードされますか?
いいえ。すべての処理はローカルで行われ、テキストがブラウザから離れることはありません。