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

Что такое кодирование HTML-сущностей?#

HTML придаёт особый смысл горстке символов: < и > ограничивают теги, & начинает сущность или ссылку на символ, а " и ' квотят значения атрибутов. Всякий раз, когда нужно, чтобы один из этих символов появился на странице как литеральный текст — показать пользователям исходник кода, вернуть поисковый запрос в поле, отобразить строку Tom & Jerry — его приходится заменять заменителем, называемым сущностью. Эта замена и есть кодирование HTML-сущностей.

Есть три способа записать одну и ту же escape-последовательность, и этот инструмент предлагает все три через селектор Параметры:

• Именованные — & становится &, < становится < и так далее. Человекочитаемо и единственная форма, которую обычно набирают вручную. В этом режиме экранируются лишь пять структурно опасных символов; всё остальное проходит нетронутым.
• Десятичные — каждый не-ASCII или управляющий символ становится &#N;, где N — его кодовая точка Unicode в десятичной форме (например © становится ©). Удобно, когда нужно, чтобы каждый нестандартный байт был видим и ASCII-безопасен.
• Шестнадцатеричные — та же идея с шестнадцатеричными кодовыми точками: © становится ©. Компактно и естественно совпадает с нотацией кодовых точек в таблицах Unicode.

Декодирование распознаёт именованные сущности из курируемого подмножества HTML5, а также &#NN; (десятичные) и &#xHH; (hex). Неизвестная именованная сущность остаётся как есть, а не угадывается — это безопаснее, чем молча выдать не тот символ.

Как пользоваться#

1. Выберите Кодировать или Декодировать переключателем в левом верхнем углу.
2. В Параметры выберите Именованные, Десятичные или Шестнадцатеричные.
3. Вставьте текст в панель Ввод слева.
4. Прочитайте экранированный (или деэкранированный) результат в панели Вывод справа и нажмите Копировать.
5. Пример загружает демонстрационную строку; Очистить сбрасывает панели.

Ключевые возможности#

• Три стиля экранирования из одного селектора. Переключайтесь между именованными, десятичными и hex без повторной вставки, что делает сравнение выводов тривиальным.
• Корректная обработка астральных символов. Итерация идёт по кодовым точкам Unicode, а не UTF-16-кодовым единицам, поэтому эмодзи вроде 🌍 трактуется как один символ (🌍), а не как сломанная пара суррогатов.
• Курируемый, безопасный декодер. Карта именованных сущностей покрывает распространённые ссылки HTML5 (копирайт, товарный знак, буквы с акцентами, математические символы, кавычки и тире). Неизвестные имена проходят нетронутыми, а не искажаются.
• Без участия DOM. Кодирование и декодирование — чисто строковые операции, без скрытой инъекции через <div>, поэтому логика полностью тестируема и нет риска, что сам инструмент интерпретирует ваш ввод как разметку.

Разбор примера#

Возьмём фрагмент, смешивающий разметку с литеральным символом:

<a href="x">Tom & Jerry</a> © 2026

В режиме Именованные экранируются только пять опасных символов, а © остаётся как есть (он не структурно опасен):

<a href="x">Tom & Jerry</a> © 2026

Переключитесь на Десятичные, и © тоже превращается в кодовую точку, а основные символы — в числовую форму:

<a href="x">Tom & Jerry</a> © 2026

В режиме Шестнадцатеричные те же символы предстают как шестнадцатеричные кодовые точки:

<a href="x">Tom & Jerry</a> © 2026

Декодирование обращает всё это: вставьте любой из трёх выводов обратно с выбранным Декодировать, и получите исходный фрагмент, включая ©.

FAQ#

Какой режим выбрать, чтобы строку было безопасно поместить в HTML?#

Именованные почти всегда правильный выбор по умолчанию для пяти опасных символов — он читаем, понятен любому браузеру и сохраняет вывод удобным для diff. Берите Десятичные или Шестнадцатеричные, когда нужно именно, чтобы каждый не-ASCII символ стал ASCII-безопасным (например, подготовка контента для транспорта, отвергающего байты со старшим битом), а не для обычного экранирования.

Я декодировал ©, а странное имя вроде &mytag; вышло неизменным. Почему?#

Декодер разрешает только те сущности, которые реально знает — курируемое подмножество HTML5 с распространёнными именами. &mytag; не настоящая HTML-сущность, поэтому инструмент оставляет её как есть, а не угадывает и не отбрасывает. Если вам действительно нужно разрешить все DTD-определённые сущности, вы вышли за рамки строкового конвертера и перешли к настоящему HTML-парсингу.

Достаточно ли HTML-экранирования, чтобы сделать ввод пользователя безопасным в JavaScript-строке или URL?#

Нет. У каждого контекста свои правила. HTML-экранирование защищает от инъекции разметки, но строка вроде '); alert(1); // безобидна в HTML и опасна внутри <script>. Тот же ввод также нуждается в URL-кодировании перед вставкой в ссылку. Экранируйте для контекста назначения, а не один раз.

Почему hex-вывод использует строчные буквы (©, а не ©)?#

Строчный hex — общепринятая, более опрятная форма, и разбирается всеми браузерами одинаково. Если по стайл-гайду нужен верхний регистр, десятичный режим (©) вообще обходит вопрос, либо пропустите вывод через собственное преобразование регистра.