Кодировщик / декодировщик HTML-сущностей

HTML-сущность – это короткая последовательность символов, представляющая символ в исходном коде HTML. Сущности используются, когда символ был бы неоднозначным или недопустимым в обычном HTML – например, `<` и `>` обозначают границы HTML-тегов, поэтому буквальный `<` в тексте должен записываться как `&lt;`, чтобы браузер не интерпретировал его как начало тега.

HTML-сущности существуют в двух формах. Именованные сущности используют читаемое имя после `&` и перед `;`, например `&amp;` для амперсанда, `&copy;` для символа авторского права или `&mdash;` для тире. Числовые сущности используют десятичную или шестнадцатеричную кодовую точку Unicode – `&#169;` и `&#xA9;` оба дают символ авторского права ©.

Пять зарезервированных HTML-символов, которые должен знать каждый разработчик:

• `&amp;` – амперсанд `&`
• `&lt;` – знак «меньше» `<`
• `&gt;` – знак «больше» `>`
• `&quot;` – двойная кавычка `"`
• `&#39;` – апостроф / одинарная кавычка `'`

Помимо этих пяти, HTML определяет именованные сущности для сотен других символов: буквы с диакритическими знаками (`&eacute;` = e с острым ударением), неразрывные пробелы (`&nbsp;`), типографические знаки препинания (`&mdash;` = тире, `&ldquo;` и `&rdquo;` = типографские кавычки), символы валют (`&euro;` = знак евро), математические символы и греческие буквы.

Кодируйте HTML-сущности всякий раз, когда вставляете обычный текст в HTML-документ и этот текст может содержать символы, зарезервированные HTML. Наиболее распространённые ситуации:

• Вставка пользовательского контента или текста блога в CMS или шаблон, хранящий сырой HTML.
• Встраивание примеров кода в записи блога или страницы документации – фрагмент вроде `<strong>жирный</strong>` должен быть закодирован как `&lt;strong&gt;жирный&lt;/strong&gt;`, чтобы браузер отображал его как видимый текст.
• Построение JSON-нагрузок, встроенных в HTML-теги `<script>`, где `<`, `>` и `&` могут нарушить окружающую HTML-структуру.
• Сохранение значений атрибутов, которые могут содержать двойные кавычки, чтобы не нарушать окружающие разделители `"..."`.
• Кодирование специальных символов для HTML-шаблонов email.

Используйте базовый режим, когда нужно экранировать только пять зарезервированных символов. Используйте расширенный режим для максимальной совместимости с HTML или для устаревших систем, поддерживающих только ASCII.

Декодируйте HTML-сущности, когда получаете уже экранированный текст и вам нужно прочитать, обработать или отобразить исходные символы. В поисковых запросах это часто называют HTML decode, HTML unescape или преобразованием HTML-кодированного текста в обычный текст. Типичные ситуации:

• Ответы API, поля которых содержат HTML-экранированный текст – например, `Tom &amp; Jerry`, когда ожидалось `Tom & Jerry`. В этом случае нужно преобразовать HTML-сущности в текст.
• Исправление дважды закодированного контента CMS, где образовались строки вроде `&amp;lt;` вместо `&lt;` или `<`.
• Чтение записей RSS- или Atom-лент, текстовое содержимое которых обычно HTML-кодировано.
• Просмотр строк лога с HTML-экранированными параметрами запроса или сообщениями об ошибках.
• Копирование видимого текста из HTML-исходника, где содержимое хранится в виде сущностей.

Этот инструмент декодирует как именованные сущности (`&amp;`, `&copy;`, `&mdash;`, `&nbsp;` и сотни других), так и числовые сущности в десятичной (`&#169;`) и шестнадцатеричной (`&#xA9;`) нотации.

Этот кодировщик предлагает два уровня детализации кодирования.

Базовый режим кодирует только пять зарезервированных HTML-символов: `&` становится `&amp;`, `<` становится `&lt;`, `>` становится `&gt;`, `"` становится `&quot;`, `'` становится `&#39;`. Все остальные символы – буквы с диакритическими знаками вроде `é` и `ü`, символы вроде `©` и `—`, эмодзи вроде 😀 – передаются без изменений. Используйте базовый режим, когда целевая среда поддерживает Unicode нативно.

Расширенный режим кодирует те же пять зарезервированных символов и дополнительно преобразует каждый не-ASCII-символ в десятичную числовую сущность. Например, `é` становится `&#233;`, `©` становится `&#169;`, `—` становится `&#8212;`, а 😀 становится `&#128512;`. Используйте расширенный режим для получения чистого ASCII-вывода или для устаревших систем.

Разработчики иногда ищут ту же задачу по запросам htmlDecode, htmlEncode, HTML escape, HTML unescape, закодировать HTML или декодировать HTML. Формулировка меняется, но цель одна: безопасное преобразование между читаемыми символами и их HTML-сущностным представлением.

Пример туда-обратно в базовом режиме:

• Ввод: `Café & © 😀`
• Закодировано (базовый): `Café &amp; © 😀`
• Декодировано: `Café & © 😀`

Пример туда-обратно в расширенном режиме:

• Ввод: `Café & © 😀`
• Закодировано (расширенный): `Caf&#233; &amp; &#169; &#128512;`
• Декодировано: `Café & © 😀`

Кодирование HTML-сущностей и URL-кодирование – это два совершенно разных механизма с разными целями и разным выводом, хотя оба преобразуют специальные символы в альтернативное представление.

Кодирование HTML-сущностей предназначено для HTML-документов. Оно заменяет символы со специальным значением в HTML-разметке сущностными последовательностями, которые HTML-парсер обрабатывает как текстовое содержимое. Результат по-прежнему читаемый текст – `&amp;` отображается как `&` в браузере.

URL-кодирование (процентное кодирование) предназначено для URL-адресов. Оно заменяет небезопасные или зарезервированные символы в URL процентно-кодированными байтовыми последовательностями. Пробел становится `%20`, амперсанд – `%26`, знак «меньше» – `%3C`.

Сравнение одних и тех же символов в обоих системах:

• `&` – HTML: `&amp;`, URL: `%26`
• `<` – HTML: `&lt;`, URL: `%3C`
• `>` – HTML: `&gt;`, URL: `%3E`
• `"` – HTML: `&quot;`, URL: `%22`
• `'` – HTML: `&#39;`, URL: `%27`

Если вставить HTML-кодированный текст в URL-кодировщик, он закодирует сами символы сущностей (`&`, `;`, `#`), что почти никогда не является желаемым. Используйте эту страницу для декодирования HTML-сущностей, кодирования HTML-сущностей и преобразования HTML-кодированного текста в читаемый вид.

Кодирование HTML-сущностей (этот инструмент) преобразует символы в их HTML-сущностные эквиваленты и обращает этот процесс. Оно не добавляет, не удаляет и не реструктурирует HTML-элементы. Структура документа сохраняется; меняется только представление специальных символов.

Очистка HTML – это другая операция, которая удаляет или переписывает HTML-разметку: удаляет нежелательные теги, нормализует атрибуты или очищает потенциально опасный контент. Функция очистки могла бы преобразовать `<b onclick="...">жирный</b>` в `<b>жирный</b>` или просто `жирный`.

Этот инструмент не очищает HTML. Если вставить сырой HTML в кодировщик, он закодирует угловые скобки и другие зарезервированные символы в разметке, превратив `<p>Привет</p>` в `&lt;p&gt;Привет&lt;/p&gt;`. Он не проверяет, не удаляет и не реструктурирует элементы.

Этот инструмент также не является очистителем текста. Он не удаляет лишние пробелы, не убирает диакритические знаки и не нормализует переносы строк. Его единственная задача – кодировать и декодировать HTML-сущности.