Restring

HTMLエスケープ

HTML特殊文字をエンティティへ変換し、エスケープ済み文字列を復元するツール。コード例の掲載、テンプレート作成、表示崩れ調査に使える。

使い方

HTMLとして扱いたい文字列を入力する。
エスケープ結果とアンエスケープ結果を確認する。
記事、テンプレート、コード例の表示前確認に使う。

HTMLエスケープ

入力

&lt;a href=&quot;/Restring&quot;&gt;hello&lt;/a&gt;

<a href="/Restring">hello</a>

こんな用途に

HTML上で<や>をタグではなく文字として表示したいとき。
記事やドキュメントへコード例を安全に載せたいとき。
テンプレート内の表示崩れや意図しないタグ解釈を避けたいとき。

仕組み

&、<、>、ダブルクォート、シングルクォートをHTMLエンティティへ置換。
既知のHTMLエンティティは対応する文字へ戻す。

確認ポイント

HTML本文では&、<、>を優先して変換する。属性値では引用符も変換する。
変換後の文字参照を確認したい場合はHTML特殊文字一覧を使う。

手元でやるには

HTMLエスケープ

必要環境: Python 3

python3 -c 'import html,sys; print(html.escape(sys.stdin.read(), quote=True))'

HTMLアンエスケープ

必要環境: Python 3

python3 -c 'import html,sys; print(html.unescape(sys.stdin.read()))'

関連ツール

HTML特殊文字一覧HTML特殊文字と文字参照の対応表。表示文字、名前付き文字参照、数値文字参照、用途を確認。URLエンコード・デコードURLやクエリパラメータをオンラインでエンコード・デコード。パーセントエンコーディングと日本語変換に対応。Unicodeインスペクタ文字のUnicodeコードポイント、UTF-8・UTF-16・UTF-32表現、文字名をオンラインで確認。文字化けや異体字、絵文字の調査に。

よくある質問

HTMLエスケープが必要な文字は？

&、<、>、ダブルクォート、シングルクォートは文脈によりエスケープが必要。

エスケープすると表示は変わる？

ブラウザ表示では元の文字として見えるが、HTMLソース上は文字参照として安全に扱われる。