HTMLエスケープ・アンエスケープツール

使い方

1. 「変換の向き」で、エスケープかアンエスケープを選びます
2. 上の欄にテキストを入力するか、貼り付けます
3. エスケープのときは、必要に応じて「エスケープの設定」を切り替えます
4. 「結果」に変換したテキストが表示されます。「結果をコピー」を押すとクリップボードに入ります

実行ボタンはなく、入力や設定を変えるたびに結果が変わります。結果の下には、置き換えた文字の数、または文字に戻した文字参照の数が表示されます。その下の「置き換えの内訳」には、何を何に置き換えたかが種類ごとに表示されます。

「結果を入力に移して逆変換」を押すと、結果が入力欄に移り、変換の向きが反対になります。エスケープした結果が元のテキストに戻ることを、その場で確かめられます。

エスケープで置き換える文字

HTMLでは、< はタグの始まり、& は文字参照の始まりとして読まれます。これらの文字を文字そのものとして表示したいときは、文字参照と呼ばれる書き方に置き換えます。この置き換えがHTMLエスケープです。

最初の設定では、次の5文字だけを置き換えます。

• & を & に
• < を < に
• > を > に
• " を " に
• ' を ' に

それ以外の文字は、日本語、絵文字、改行、タブ、空白を含めて変更しません。

' を ' ではなく ' にしているのは、' がHTML 4までの仕様に含まれていなかった名前で、古いブラウザやメールソフトでは文字に戻らないことがあるためです。' はどの環境でも ' として読まれます。アンエスケープでは ' も ' に戻します。

具体例

リンクのHTMLを、記事の中にコードとしてそのまま載せたいとします。

<a href="/search?q=1&lang=ja">検索</a>

エスケープした結果:

<a href="/search?q=1&lang=ja">検索</a>

下には「7文字を文字参照に置き換えました。」と表示されます。この結果をHTMLに貼り付けると、ブラウザの画面には元のタグが文字として表示され、リンクにはなりません。

反対に、変換の向きを「アンエスケープ」にして上の結果を貼り付けると、元の1行に戻り、「7件の文字参照を文字に戻しました。」と表示されます。

置き換えの内訳

結果の下の「置き換えの内訳」は、置き換えたものを種類ごとに1行ずつ並べ、それぞれの数を表示する表です。

• エスケープでは、置き換えた文字と、その文字参照を並べます。文字の横には U+003C のようなコードポイントを添えるので、改行しない空白（U+00A0）のような見えない文字も見分けられます
• アンエスケープでは、入力にあった文字参照を書かれたとおりに並べ、戻した文字を添えます。< と < のように同じ文字になる参照でも、書き方が違えば別の行になります
• アンエスケープで、このアプリが知らない名前の参照は「そのまま残しました（知らない名前）」として表の先頭に並びます。どの名前が残ったかを、ここで確かめられます

行は数の多い順に並び、同じ数なら入力の中で先に出てきたものが上になります。アンエスケープでは、知らない名前の参照がまとめて先頭に来て、その後に戻した参照が数の多い順に続きます。種類が10を超えるときは、表の上から10種類を表示します。「すべて表示」を押すと残りも表示されます。

上の例をエスケープすると、<、"、> が2文字ずつ、& が1文字で、「4種類」と表示されます。

エスケープの設定

ASCII以外の文字も文字参照にする

オンにすると、5文字に加えて、日本語、アクセント付きの英字、記号、絵文字など、ASCII（半角の英数字と基本の記号）に含まれない文字も文字参照にします。結果は通常ASCIIの文字だけになるため、文字コードがUTF-8でないページやメール、ASCIIしか通せない設定ファイルに書くときに使えます。

書き方は3つから選べます。上の例の 検索 と、著作権記号 © で比べます。

• 名前（なければ10進数）: © は ©、検索 は 検索。名前が決まっている文字は名前で書き、名前がない文字は10進数で書きます
• 10進数: © は ©、検索 は 検索
• 16進数: © は ©、検索 は 検索。16進数の英字は大文字で書きます

どの書き方を選んでも、5文字の置き換え先（& など）は変わりません。

数字は文字のUnicodeのコードポイントです。😀 のようにコードポイントが1つの絵文字は 😀 の1つになります。肌の色を指定した絵文字や国旗のように、複数のコードポイントを組み合わせた1文字は、コードポイントごとに分けて書きます。たとえば 👍🏽 は16進数で 👍🏽 になり、置き換えた数は2文字と数えます。

タブ、改行などのASCIIの制御文字は置き換えません。次の2種類の文字も、文字参照にしても元の文字として読まれないため、置き換えずにそのまま残します。これらが入力に含まれていると、結果はASCIIだけになりません。

• U+0080からU+009Fの制御文字。HTMLはこの範囲の番号を別の文字として読みます（「文字にならない番号」を参照）
• 対になっていないサロゲート。壊れた絵文字などに含まれます

すでに文字参照になっている & はそのままにする

最初の設定では、& はすべて & に置き換えます。そのため、すでにエスケープ済みの < をもう一度エスケープすると < になります。これが二重エスケープで、ブラウザの画面に < という文字がそのまま見えてしまう原因です。

この設定をオンにすると、& の後ろが文字参照の形になっている場合に限り、その & を置き換えません。文字参照の形とは、次のいずれかです。

• & に続けて英字で始まる英数字の名前、最後に ;（<、© など）
• &# に続けて数字、最後に ;（< など）
• &#x に続けて16進数、最後に ;（< など）

たとえば &lt;b&gt; & < は、この設定がオンなら <b> & < になります。オフなら <b> & < です。

名前が実在するかどうかは確かめません。&abc; のように形だけが合っている文字列も、文字参照として残します。エスケープ済みの部分とそうでない部分が混ざったテキストを整えるための設定なので、エスケープされていないテキストを扱うときはオフのまま使ってください。

アンエスケープで戻せる文字参照

アンエスケープは、次の3種類の文字参照を文字に戻します。

• 名前の文字参照: <、&、 、©、… など253種類
• 10進数の数値文字参照: <、日 など
• 16進数の数値文字参照: <、日 など。x と16進数の英字は、大文字でも小文字でも構いません

名前は、HTML 4で定義された252種類と ' に対応しています。記号、アクセント付きの英字、ギリシャ文字、矢印、数学記号の主なものが含まれます。HTMLの現在の仕様には2,000を超える名前がありますが、↪ のようにこの253種類に含まれない名前は変換せず、そのまま残します。残した数は、結果の下に「このアプリが知らない名前の参照」として表示されます。残した名前は「置き換えの内訳」で確かめられます。

次の点に注意してください。

• 最後の ; がない書き方は変換しません。ブラウザは &amp や &lt のような一部の名前を ; なしでも読みますが、このアプリは ; で終わるものだけを文字参照として扱います
• 名前は大文字と小文字を区別します。É は É、é は é です。& や ≪ は変換しません
• 1回の変換で戻すのは1段だけです。< は < になり、< にはなりません。結果にまだ文字に戻せる文字参照があるときは、結果の下にその数と「結果をもう一度アンエスケープ」のボタンが表示されます。押すと結果が入力欄に移り、もう1段戻します。元のテキストに < のような文字列がもともと含まれている場合も表示されるので、二重にエスケープされたテキストのときだけ押してください
• 文字参照でない & や、その他の文字は変更しません

文字にならない番号

数値文字参照の番号が文字として使えない場合は、HTMLの仕様と同じ読み方をします。

• 0、サロゲートの範囲（U+D800からU+DFFF）、U+10FFFFより大きい番号は、置換文字 �（U+FFFD）になります
• 128から159の番号は、Windows-1252という古い文字コードの番号として読みます。たとえば € は €、’ は ’、™ は ™ になります。古いページに残っているこの書き方を、ブラウザと同じ文字に戻すための扱いです

エスケープだけでは安全にならない場所

このアプリのエスケープは、HTMLの要素の中身と、引用符で囲んだ属性値にテキストを置くためのものです。次の場所では、5文字を置き換えるだけでは足りないか、別の方法が必要です。

• <script> や <style> の中。ここでは文字参照が文字に戻されないため、エスケープした文字列がそのまま使われます
• 引用符で囲んでいない属性値。空白などで値が終わってしまうため、属性値は必ず引用符で囲んでください
• href や src に入れるURL。URLに含める文字列は、先にURLエンコード・デコードツールでパーセントエンコードします。javascript: で始まるURLのような危険な値は、エスケープしても防げません
• JavaScriptの文字列やJSONの中。それぞれの書式の決まりでエスケープします

利用者が入力した内容をWebアプリの画面に出すときは、手作業で変換するのではなく、使っている言語やフレームワークが備えているエスケープの機能を使ってください。このアプリは、記事にコードを載せる、エスケープ済みの文字列の中身を確かめる、といった手元の作業に向いています。

入力したテキストはこのページを開いているブラウザの中だけで処理され、外部へ送信も保存もされません。ページを再読み込みすると入力は消えます。

FAQ

HTMLエスケープとURLエンコードは何が違いますか？

置き換える目的と書き方が違います。HTMLエスケープは、HTMLの中で特別な意味を持つ文字を < のような文字参照に置き換えます。URLエンコードは、URLの中で使えない文字を %E3%81%82 のようなパーセント記号の形に置き換えます。URLをHTMLの属性に書くときは、先にURLエンコードをして、できあがったURL全体をHTMLエスケープします。

スペースや改行は置き換えられますか？

置き換えません。半角スペース、タブ、改行はそのまま残ります。HTMLでは連続した空白や改行が1つの空白として表示されるため、見た目どおりに表示したいときは <pre> で囲むか、CSSの white-space を使ってください。「ASCII以外の文字も文字参照にする」をオンにすると、最初の書き方（名前）では、改行しない空白（U+00A0）は   になり、全角スペースは 　 になります。

画面に < のような文字がそのまま見えてしまうのはなぜですか？

同じテキストを2回エスケープしたためです。1回目で < が < になり、2回目でその & が & になって < ができます。ブラウザは1段しか戻さないので、画面には < が見えます。アンエスケープで1段戻すと、正しくエスケープされた状態になります。

  はアンエスケープするとどうなりますか？

改行しない空白（U+00A0）という1文字になります。見た目は半角スペースと同じですが、別の文字です。そのまま検索や比較に使うと、半角スペースとは一致しません。

日本語を文字参照にする必要はありますか？

ページの文字コードがUTF-8なら必要ありません。日本語はそのまま書けます。文字参照にすると、同じ文章でもファイルが大きくなり、ソースが読みにくくなります。必要になるのは、UTF-8以外の文字コードで保存されるページやメールのテンプレートに、その文字コードにない文字を書く場合などです。

絵文字1つが、複数の文字参照になるのはなぜですか？

その絵文字が、複数のコードポイントを組み合わせて作られているためです。肌の色を指定した絵文字、家族の絵文字、国旗などが当てはまります。文字参照はコードポイント1つにつき1つ書くので、組み合わせの数だけ並びます。ブラウザはそれらをまとめて1つの絵文字として表示します。

変換できない文字参照が残るのはなぜですか？

名前がこのアプリの対応する253種類に含まれていないか、最後の ; がないか、名前の大文字と小文字が違っているためです。数値文字参照（↪ のような書き方）は、名前の有無に関係なくどの文字でも戻せます。