テキストに「&」と表示される理由と直し方
公開日 · 更新日 読了目安 2分
テキストに「&」ではなく「&」と表示されるとき、HTMLエンティティが1回多くエンコードされています。ツールは一度に1段階ずつデコードし、まだ残っているときはそう伝えます。
HTMLエンティティとは
エンティティは、ページのコードのために予約された文字を表す記号の並びです。よく使われるものが5つあります。
| 文字 | エンティティ |
|---|---|
| & | & |
| < | < |
| > | > |
| " | " |
| '（まっすぐなアポストロフィ） | ' |
二重エンコードの原因
テキストが、それぞれエンコードを行う2つのシステムを通ることがあります。エディターと、ページのテンプレートです。通るたびに、前のエンティティの「&」が変換されます。HTMLエンティティをエンコード/デコードで「Tom & Jerry」をエンコードすると「Tom & Jerry」になり、その結果をもう一度エンコードすると「Tom &amp; Jerry」になります。
| 手順 | できあがるテキスト |
|---|---|
| 元のテキスト | Tom & Jerry |
| 1回エンコード | Tom & Jerry |
| 2回エンコード | Tom &amp; Jerry |
ブラウザは表示のとき1段階だけデコードします。そのため、2回エンコードされたテキストは「&」ではなく「&」と表示されます。
1段階ずつデコードする
ツールは1回の処理で、エンティティを1段階だけ取り除きます。結果にまだエンティティが含まれていれば、「両方」モードがそれを知らせるので、結果にもう一度デコードを行います。
| テキスト | 1回目のデコード | 2回目のデコード |
|---|---|---|
| Tom &amp; Jerry | Tom & Jerry | Tom & Jerry |
| &lt;b&gt;gras&lt;/b&gt; | <b>gras</b> | <b>gras</b> |
1段階だけデコードすれば、意図したエンコードを元に戻してしまうことを避けられます。画面に「&」と表示したいコード例は、ページの中では「&amp;」と書かれます。
アクセント記号と記号
デコードは、セミコロンで終わるすべての名前付きエンティティを理解します。よく使う5つだけではありません。「café à 5 € © 2026」は「café à 5 € © 2026」になり、ノーブレークスペースは本物のノーブレークスペースになります。
数値エンティティ
数値エンティティもデコードされます。「été」は「été」になり、「😀」と「😀」は同じ絵文字になります。
ツールが手を触れないもの
- 「&inconnue;」のような未知のエンティティは、そのまま残ります。
- 文中の「&」や「<」のように、末尾にセミコロンのないエンティティには手を触れません。
- 「https://exemple.fr/?a=1¶m=2©=4」のようなパラメータ付きのアドレスは、正確なままです。「¶m」と「©」はエンティティとは見なされません。
コードを表示するためにエンコードする
ページにコードの一部を表示するには、1回だけエンコードします。テキスト「<a href="x">l’été & plus</a>」は「<a href="x">l'été & plus</a>」になります。アクセント付きの文字はエンコードされず、予約された5文字だけがエンコードされます。
問題を避ける
エンコードは、ページに書き込む最後の瞬間に、1回だけ行います。誤ったエンコードの残りをまとめて置き換えるには、テキストを検索して置換が向いています。Webアドレスは別のエンコードに従います。それはBase64、ハッシュ、エンコードされたアドレスを混同しないで説明しています。
結果を確認する
- ツールがエンティティが残っていると知らせる限り、デコードをもう一度行います。
- 画面上の元のテキストと比べます。
- ノーブレークスペースと絵文字を確認します。