tigtools

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

Подготовьте текст для вставки в HTML или преобразуйте сущности, например & и é, обратно в обычные символы.

Работает в браузере Без регистрации

Направление

Символы & < > " и ' экранируются всегда. Остальные символы преобразуются только при выборе параметра для символов не из ASCII.

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

  1. Выберите «Кодировать», чтобы подготовить текст для HTML, или «Декодировать», чтобы преобразовать сущности обратно в символы.
  2. При кодировании выберите, оставить ли буквы с диакритическими знаками и символы как есть или преобразовать их в сущности.
  3. Введите или вставьте текст — результат обновится сразу.
  4. Скопируйте результат или нажмите «Использовать результат как входные данные», чтобы проверить, что текст декодируется обратно в исходный.

Как это работает

В HTML некоторые символы имеют специальное значение: < начинает тег, & начинает сущность, а " или ' закрывают значение атрибута. Чтобы отобразить их как текст, используйте символьные ссылки: &lt; для <, &gt; для >, &amp; для &, &quot; для " и &#39; для '. Для апострофа используется числовая запись, поскольку &apos; не определена в HTML 4.

Все остальные символы, в том числе буквы с диакритическими знаками, китайский текст и эмодзи, можно записывать напрямую, если страница сохранена и передаётся в кодировке UTF-8, которая используется по умолчанию на современных сайтах. Преобразовывать их в сущности нужно только для систем, не поддерживающих UTF-8, например некоторых старых шаблонов писем или баз данных. В этом случае можно выбрать именованные сущности, например &eacute; (если для символа есть распространённое имя; для остальных используется числовая запись), или числовые ссылки, например &#xE9;, для каждого символа.

Для декодирования не используется HTML-парсер браузера. Вместо этого применяется встроенная таблица со всеми 252 именованными сущностями из HTML 4.01, с &apos; и примерно 30 распространёнными именами HTML5, а также с десятичными и шестнадцатеричными ссылками. Числовые ссылки обрабатываются по правилам HTML5: &#0;, значения суррогатов и значения выше U+10FFFF заменяются символом �, а значения 128–159 интерпретируются как Windows-1252, поэтому &#150; превращается в короткое тире. Несколько устаревших имён, например &amp и &copy, также принимаются без завершающей точки с запятой, как в браузерах. В HTML5 определено более 2 000 имён; редкие имена, которых нет в таблице, остаются без изменений и перечисляются отдельно.

Экранирование текста перед вставкой в HTML — важная мера защиты от межсайтового скриптинга (XSS), но такой способ подходит только для содержимого элементов и значений атрибутов в кавычках. Для текста внутри блока <script>, атрибута style или URL требуется другое экранирование.

Примеры

Отображение кода на веб-странице

Чтобы показать <div class="box"> как текст в записи блога, преобразуйте его в &lt;div class=&quot;box&quot;&gt;. Браузер отобразит исходный тег, а не создаст элемент.

Подготовка текста для старого шаблона письма

При выборе «Именованные сущности, если доступны» строка «Café – 5 €» преобразуется в Caf&eacute; &ndash; 5 &euro; и отображается корректно, даже если письмо отправлено в кодировке, отличной от UTF-8.

Очистка текста из выгрузки или с сайта

В экспорте из CMS есть Fish &amp; Chips &#8211; &pound;9. После декодирования получается Fish & Chips – £9 — текст можно вставить в таблицу.

Часто задаваемые вопросы

Какие символы нужно экранировать в HTML?

В содержимом элемента необходимо экранировать & и < (также рекомендуется экранировать >). В значениях атрибутов нужно экранировать и символ кавычек, которым заключено значение. Простое и безопасное правило — экранировать везде все пять символов (& < > " '), как это делает этот инструмент.

Чем отличаются именованные и числовые сущности?

Именованные сущности, например &copy;, удобнее читать, но они существуют лишь для ограниченного набора символов. Числовые ссылки, например &#169; (десятичная) или &#xA9; (шестнадцатеричная), работают для любого символа Unicode, включая эмодзи.

Почему после декодирования &nbsp; получается символ, похожий на пробел?

&nbsp; — это неразрывный пробел (U+00A0). Он выглядит как обычный пробел, но не позволяет переносить строку и не схлопывается в HTML. Это другой символ, чем обычный пробел, что важно при сравнении и поиске текста.

Нужно ли кодировать буквы с диакритическими знаками, например é?

Нет, если на странице используется UTF-8 (<meta charset="utf-8">), как на большинстве современных страниц. Оставьте настройку по умолчанию — будут экранироваться только пять специальных символов.

Достаточно ли кодирования для защиты от XSS?

Для недоверенного текста, вставляемого в содержимое HTML-элемента или в значение атрибута в кавычках, этого достаточно. Но этого недостаточно для кода JavaScript, CSS, атрибутов без кавычек и URL, например href="javascript:…": для них нужна обработка с учётом контекста.

Конфиденциальность

Кодирование и декодирование выполняются в браузере с помощью обычных строковых операций; текст не отображается как HTML, не загружается на сервер, не сохраняется и не включается в аналитику.