encoding / html

HTML エスケープ / アンエスケープ

HTMLの特殊文字（< > & " '）をエンティティ形式にエスケープ・アンエスケープします。XSS対策の確認や表示テストに便利です。

使い方

01
  1. 「エスケープ」または「アンエスケープ」タブを選択してください
  2. テキストエリアに入力すると、リアルタイムで変換結果が表示されます
  3. エスケープでは < > & " ' の5種類の特殊文字が変換されます
  4. アンエスケープでは名前付きエンティティ・十進数・十六進数参照に対応します
  5. 「コピー」ボタンで変換結果をクリップボードにコピーできます

実装コード

02

ブラウザ標準の String.replace() と String.fromCodePoint() のみで実装。外部ライブラリ不要でそのままコピーして利用できます。

export function escapeHtml(input: string): string {
  // In this order: & → &amp;  < → &lt;  > → &gt;  " → &quot;  ' → &#39;
  return input
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
}

export function unescapeHtml(input: string): string {
  // Handle named entities and numeric/hex references
  // Unknown entities pass through unchanged
  return input.replace(
    /&(?:#(\d+)|#x([0-9A-Fa-f]+)|([a-zA-Z]+));/g,
    (match, dec, hex, named) => {
      if (dec) return String.fromCodePoint(parseInt(dec, 10))
      if (hex) return String.fromCodePoint(parseInt(hex, 16))
      const namedEntities: Record<string, string> = {
        amp: '&', lt: '<', gt: '>', quot: '"', apos: "'"
      }
      return namedEntities[named] ?? match
    }
  )
}

よくある使用例・注意点

03
XSS（クロスサイトスクリプティング）対策
ユーザー入力をHTMLに埋め込む場合、<script>タグや onload 属性などを含む悪意ある文字列を無害化するためにエスケープが必要です。< > & " ' の5文字を必ずエスケープすることで基本的なXSSを防止できます。
テンプレートエンジンとの使い分け
ReactやVue、その他モダンなフレームワークでは変数展開時に自動でHTMLエスケープが行われます。dangerouslySetInnerHTML（React）やv-html（Vue）など、生のHTMLを挿入する機能を使う場合は手動でエスケープが必要です。
&の順序が重要
エスケープ処理では必ず & を最初に変換する必要があります。& を後から変換すると、すでに変換済みの < や > の & が再びエスケープされて &lt; のように二重エスケープされてしまいます。
数値文字参照（{ など）の利用
HTMLエンティティには & < などの名前付き参照に加え、{（十進数）や{（十六進数）のような数値文字参照があります。このツールのアンエスケープではどちらの形式にも対応しています。
属性値のエスケープとクォート
HTML属性値をエスケープする場合、ダブルクォートで囲む属性には " のエスケープが必須です。シングルクォートで囲む場合は ' のエスケープが必要です。安全のため両方ともエスケープしておくことを推奨します。

関連ツール

04
URLエンコード — 準備中JSONフォーマッター — 準備中ハッシュ生成 — 準備中文字数カウンター

ソースコード

05

このツールのソースコード（テストコードを含む）はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。

GitHub でコードを見る →