Бесплатный HTML-кодировщик сущностей — экранирование HTML

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

// Server-side templates auto-escape, but when you build HTML by hand you must escape yourself.
// The five reserved characters and their safe entities:
//   <  →  &lt;     >  →  &gt;     &  →  &amp;     "  →  &quot;     '  →  &#x27;

// Node.js — escape untrusted input before inserting it into HTML element content.
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')   // & first, so later entities are not double-escaped
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;'); // numeric form — safe in HTML4, HTML5 and XML
}

const userInput = `<a href="x">Tom & Jerry's</a>`;
const safe = escapeHtml(userInput);
// → &lt;a href=&quot;x&quot;&gt;Tom &amp; Jerry&#x27;s&lt;/a&gt;
document.getElementById('out').innerHTML = `<p>${safe}</p>`; // renders as literal text

// ---------------------------------------------------------------
// In practice, prefer the platform's built-in escaping where it exists:
//   - React / Vue / Angular escape interpolated text by default
//   - Use textContent instead of innerHTML when you only need text:
//       el.textContent = userInput;  // the browser escapes for you
//   - Server frameworks (Jinja, ERB, Blade) auto-escape unless you opt out

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

Разобранные примеры

<a href="x">Tom & Jerry's</a>

<a href="x">Tom & Jerry's</a>

Visit our café — it's 😀

Visit our café — it's 😀

<>&"'

<>&"'

<>&"'

<>&"'

café

café  (named)  ·  café  (decimal)  ·  café  (hex)

Как пользоваться HTML-кодировщиком сущностей

1. 1

   Вставьте ваш HTML или текст

   Поместите разметку или обычный текст, который нужно экранировать, в поле ввода. Закодированный вывод обновляется в реальном времени по мере ввода — кнопки отправки нет, и ничего никуда не отправляется.

2. 2

   Выберите формат сущностей

   Именованный — читаемый вариант по умолчанию (<, &, ©). Переключитесь на Десятичный (<) или Hex (<), когда принимающая система предпочитает числовые ссылки или нельзя гарантировать поддержку именованных сущностей.

3. 3

   При необходимости кодируйте все символы не из ASCII

   Оставьте это выключенным для современных UTF-8-страниц, чтобы диакритика и эмодзи оставались читаемыми сырыми символами. Включайте только когда текст должен пережить устаревшую однобайтовую кодировку — тогда каждый символ выше 0x7F преобразуется в безопасную для ASCII сущность.

4. 4

   Скопируйте закодированный результат

   Нажмите «Копировать», чтобы поместить экранированную строку в буфер обмена, готовую к вставке в шаблон, страницу документации или поле базы данных. «Очистить» сбрасывает обе панели для следующего фрагмента.

5. 5

   Нужно обратное? Смените направление

   Используйте «Сменить направление», чтобы переключиться на HTML-декодировщик сущностей, когда хотите превратить сущности обратно в символы, которые они представляют.

Частые ошибки кодирования HTML

replace < and > first, then &  →  &lt;  becomes  &amp;lt;

escape & first, then the rest  →  <  stays  <

It's here  →  may render as  It's here

It's here  →  renders as  It's here

&  encoded again  →  &  shows as  &

&  left as-is  →  renders as  &

href="/search?q=a&b c"  →  the space still breaks the URL

href="/search?q=a%26b%20c"  →  URL-encoded, valid

café on a UTF-8 page  →  needless, harder to read

café on a UTF-8 page  →  valid and clean

title="He said "hi""  →  attribute breaks out

title="He said "hi""  →  contained

Кто пользуется этим инструментом

Показ примеров кода на веб-странице

Пишете руководство или документацию, где нужно показать буквальный HTML? Экранируйте фрагмент, чтобы <strong>bold</strong> отображался как текст, а не отрисовывался. Вставьте разметку, скопируйте экранированный вывод и поместите его внутрь блока <pre> или <code>.

Очистка пользовательского ввода от XSS

Перед вставкой любой пользовательской строки в ваш HTML экранируйте пять зарезервированных символов, чтобы полезная нагрузка вроде <script>…</script> стала безвредным текстом. Это основополагающая защита от межсайтового скриптинга, когда вы собираете разметку вручную.

Хранение разметки в поле базы данных или JSON

Нужно сохранить HTML-фрагмент как обычную строку, чтобы он не интерпретировался дальше по конвейеру? Сначала закодируйте его, чтобы угловые скобки и амперсанды пережили хранение и повторный показ в целости, а затем декодируйте на обратном пути.

Создание шаблонов писем и контента CMS

Почтовые клиенты и системы управления контентом нетерпимы к сырым спецсимволам. Экранируйте зарезервированный набор — и при необходимости все символы не из ASCII — чтобы ваш шаблон отображался единообразно в клиентах, которые могут не разделять вашу кодировку.

Преобразование текста для устаревшей кодировки

Целитесь в систему, не умеющую работать с сырым UTF-8? Включите «Кодировать все символы не из ASCII», чтобы переписать каждую букву с диакритикой, символ и эмодзи как безопасную для ASCII сущность, гарантируя, что текст переживёт передачу через 7-битные конвейеры.

Экранирование значений атрибутов XML и SVG

XML и встроенный SVG используют те же зарезервированные символы, что и HTML. Закодируйте кавычки и угловые скобки, чтобы строка со встроенной разметкой безопасно встала в значение атрибута, не ломая структуру документа.

Быстрый поиск сущности

Забыли, как пишется знак товарного знака — ™ или ™? Введите символ, считайте его именованную, десятичную и шестнадцатеричную сущность из вывода или загляните во встроенную справочную таблицу, не покидая страницу.

Как работает кодировщик

Режим спецсимволов (по умолчанию)

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

Апостроф использует '

Вместо именованного ' — не определённого в HTML4 и небезопасного в некоторых старых парсерах — одиночная кавычка выводится как числовой ' (десятичный '), ссылающийся на U+0027. Это совпадает с соглашением хорошо протестированных библиотек вроде he и гарантирует, что вывод безопасен в HTML4, HTML5 и XML одинаково.

Именованное, десятичное и шестнадцатеричное кодирование

Селектор формата управляет тем, как записывается каждый экранированный символ: Именованный использует определённые метки там, где они есть (<, ©), Десятичный записывает кодовую точку Unicode по основанию 10 (<), а Hex — по основанию 16 (<). Числовые формы ссылаются на те же кодовые точки, что и именованные, и взаимозаменяемы при разборе.

Опция кодирования всех символов не из ASCII

При включении каждый символ с кодовой точкой выше 0x7F преобразуется в сущность выбранного формата — café становится café (именованный), café (десятичный) или café (hex). Символы из астральных плоскостей вроде эмодзи кодируются полной кодовой точкой (😀 → 😀). Это даёт 7-битный чистый ASCII-вывод для устаревшей передачи.

Кодировка против сущностей

Набор символов определяет, как текст хранится в виде байтов; сущность — это способ записать символ, используя только ASCII. На UTF-8-странице символы не из ASCII не нуждаются в сущности, поэтому по умолчанию они остаются сырыми. Кодировать всё нужно лишь когда вывод должен пройти через не-Unicode-кодировку или враждебную к UTF-8 систему.

Локально в браузере, ноль сети

Кодирование выполняется синхронно в JavaScript в основном потоке; нет ни вызовов API, ни обмена с воркером на сервере, ни сохранения. Ввод никогда не покидает страницу, в чём можно убедиться, наблюдая пустую панель Network во время ввода.

Лучшие практики экранирования HTML

Экранируйте на выходе, в правильном контексте

Кодируйте данные в момент вставки в HTML, а не при получении, и сопоставляйте кодирование с контекстом. Кодирование HTML-сущностей — для содержимого элементов и атрибутов HTML; используйте URL-кодирование внутри URL и экранирование JavaScript/JSON внутри блоков скриптов. Экранирование в неверном контексте оставляет брешь.

Всегда экранируйте недоверенный ввод

Любая строка, исходящая от пользователя, загрузки или внешнего API, должна быть экранирована перед попаданием в вашу разметку. Это основная защита от XSS: полезная нагрузка вроде <script>alert(1)</script> становится безвредным текстом, как только угловые скобки превращаются в сущности.

Предпочитайте встроенное экранирование там, где оно есть

React, Vue и большинство серверных шаблонизаторов экранируют интерполированный текст автоматически; установка element.textContent тоже экранирует за вас. Используйте этот инструмент для разовых преобразований и для понимания вывода — но в коде приложения опирайтесь на авто-экранирование фреймворка, а не пишите его вручную.

Оставляйте символы не из ASCII сырыми на UTF-8-страницах

Если ваша страница объявляет <meta charset="utf-8">, не кодируйте диакритику и эмодзи в сущности — сырой UTF-8 короче, читаемее и так же корректен. Приберегите «Кодировать все символы не из ASCII» для подлинных случаев устаревших кодировок, которым это действительно нужно.

Используйте числовой апостроф в смешанных контекстах

Когда вывод может потребляться старыми парсерами, XML-процессорами или почтовыми клиентами, предпочитайте числовой ' именованному ' для одиночной кавычки. Числовая форма понятна везде; именованная — нет, и случайный буквальный «'» в отрисованном тексте — распространённая, легко устранимая ошибка.

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