HTMLエスケープ・アンエスケープツール｜タグ削除もできる（無料・送信なし）

ブログの記事にHTMLのコード例を載せたい。フォームに入力された文字列を安全に表示したい。そのまま貼るとタグとして解釈され、レイアウトが崩れるか、意図しない動作の原因になります。

このツールは、タグとして解釈される文字を実体参照に変換します。逆方向のアンエスケープと、タグだけを取り除いてテキストにする処理にも対応しています。

処理はすべてブラウザ内で完結し、貼り付けた内容は送信されません。

エスケープが必要な5つの文字

順番が重要です。アンパサンドを最初に変換しないと、他の文字を変換したあとにできた実体参照まで二重に変換されてしまいます。このツールは正しい順序で処理します。

属性値のクォートを忘れない

class=値 のようにクォートで囲まない書き方は、値に空白が入った時点で壊れます。属性値は必ずクォートで囲み、値に含まれるクォートはエスケープしてください。

なぜエスケープが安全性に関わるのか

利用者が入力した文字列をそのままページに出力すると、そこに書かれたタグやスクリプトがブラウザ上で動いてしまいます。

原則は「入力時ではなく出力時にエスケープする」です。入力時に変換して保存すると、別の場所（メール本文、CSV出力、API応答）で使うときに二重エスケープや表示崩れが起こります。データは元のまま保存し、HTMLとして出す瞬間に変換するのが定石です。

このツールは、手作業での確認や記事へのコード掲載を目的としたものです。実際のアプリケーションでは、使用している言語やフレームワークが提供するエスケープ機能（テンプレートエンジンの自動エスケープなど）を使ってください。手動での変換は漏れが生じます。

よく使う実体参照

エスケープが必要な5文字のほかにも、HTMLでは特定の文字を実体参照で書くことがあります。表示上の理由で使うものが中心です。

これらは安全性のためではなく、表示や可読性のために使うものです。UTF-8で書かれた現代のページでは、記号をそのまま書いても問題なく表示されます。実体参照が必須なのは、あくまでタグとして解釈される5文字だけです。

改行しない空白は、使いすぎると読みにくくなります。レイアウトの調整目的で連続して入れると、画面幅が狭い端末で文字が画面からはみ出す原因になります。余白の調整はCSSで行ってください。

アンエスケープで元に戻るもの

このツールのアンエスケープは、ブラウザの解釈機能を使っています。そのため上記のような名前付きの実体参照も、数値で指定された参照も、すべて実際の文字に戻ります。エスケープ済みのデータを元のテキストとして取り出したいときに使えます。

タグの削除について

「タグを削除」はHTMLとして解釈したうえでテキストだけを取り出します。そのため   のような実体参照も実際の文字に変換されます。単純な正規表現での除去とは結果が異なります。

タグの削除は表示用のテキスト抽出を目的とした機能です。信頼できない入力から安全なHTMLを作る用途（サニタイズ）には使わないでください。その場合は、専用のライブラリで許可するタグを明示的に指定する方式を使う必要があります。

文字数を数えたい場合はタグを削除してから文字数カウントへ、URLの記号を変換したい場合はURLエンコード・デコードをご利用ください。

まとめ

HTMLのエスケープでは、アンパサンドを最初に変換する順序が重要です。これを守らないと、変換後の実体参照がさらに変換されて壊れます。

そして原則は「入力時ではなく出力時にエスケープする」こと。データは元のまま保存し、HTMLとして出す瞬間に変換します。実体参照が必須なのはタグとして解釈される5文字だけで、その他の記号はUTF-8ならそのまま書けます。