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

HTML-сущности — это короткие коды, обозначающие символы, зарезервированные в HTML или неудобные для ввода. Каждая из них начинается с амперсанда и заканчивается точкой с запятой — например &amp; — это амперсанд (&), &lt; — знак «меньше» (<), а &copy; — знак авторского права (©). Сущности позволяют отображать символ буквально, не воспринимая его как разметку, и гарантируют корректный рендеринг символа даже если кодировка страницы его не включает. С ними постоянно приходится работать при написании HTML вручную или санитизации пользовательского ввода в веб-приложениях.

Вставьте текст в левую панель и оставьте режим «Кодировать». Выберите, какие символы экранировать — только зарезервированные (< > & " '), зарезервированные плюс все не-ASCII символы, или все символы — а также формат вывода: именованный, десятичный или hex. Например, с именованным вариантом «Рыба & Чипсы <3» превратится в «Рыба &amp; Чипсы &lt;3». Результат появится справа мгновенно. Нажмите «Копировать» и вставьте прямо в HTML. Всё происходит в браузере — без загрузки файлов, без аккаунта и без ограничений на объём кодируемого текста.

Переключите режим на «Декодировать» и вставьте закодированный HTML в левую панель — читаемый текст появится справа мгновенно. Инструмент понимает именованные, десятичные и шестнадцатеричные сущности, поэтому &lt;div&gt; Tom &amp; Jerry &#169; декодируется в <div> Tom & Jerry ©. Используйте кнопку «Поменять» для переключения панелей, если хотите повторно закодировать результат. Декодер работает со смешанными типами сущностей в одной строке — именованные, десятичные и hex могут встречаться вместе, каждая декодируется корректно. Декодер FreeFormatter.com требует отправки формы и перезагрузки страницы для каждого преобразования; этот инструмент обновляется в реальном времени по мере ввода.

Это четыре наиболее распространённые HTML-сущности. &amp; — амперсанд (&), &lt; — знак «меньше» (<), &gt; — знак «больше» (>), а &nbsp; — неразрывный пробел, который не позволяет браузеру переносить строку или «схлопывать» пробелы. Удобно использовать между значением и единицей измерения, например 10&nbsp;кг — чтобы они никогда не оказались на разных строках. Важно: экранируйте & как &amp; до всего остального, иначе сам &amp; может быть ошибочно воспринят как начало новой сущности и вызвать двойное кодирование.

Это три способа записать один и тот же символ. Именованная сущность использует понятное ключевое слово (&amp;); десятичная числовая сущность использует кодовую точку символа Unicode в основании 10 (&#38;); шестнадцатеричная — в основании 16 (&#x26;). Все три дают амперсанд. Именованные сущности лучше читаются, но имена есть только у примерно 2000 символов, поэтому числовые сущности — это запасной вариант для всего остального, включая эмодзи (например, улыбающееся лицо 😀 — это &#128512;). Именованные сущности безопаснее всего с точки зрения читаемости. Стандарт HTML5 значительно расширил список именованных сущностей по сравнению с HTML4; этот инструмент охватывает полный набор HTML5 из более чем 2200 именованных символов.

Три символа несут особое значение в содержимом страницы и должны всегда экранироваться: & (&amp;), < (&lt;) и > (&gt;). Внутри значений атрибутов также нужно экранировать " (&quot;) и ' (&#39;). Сначала экранируйте амперсанд, иначе сам &amp; может быть воспринят как начало сущности и пройти двойное экранирование. Опция «Зарезервированные» в режиме кодирования обрабатывает ровно эти пять символов и оставляет остальной текст нетронутым — идеально для санитизации пользовательского ввода или вывода шаблонов без избыточного кодирования символов, которые в этом не нуждаются.

Распространённые стрелки: &larr; (←), &rarr; (→), &uarr; (↑), &darr; (↓) и &harr; (↔), а также двухлинейные версии &lArr;, &rArr; и &hArr; (⇐ ⇒ ⇔). Для любого другого символа используйте поиск по списку ниже — введите «arrow», «heart» или «euro», затем кликните по именованному, десятичному или hex-коду, чтобы скопировать его. Полный список охватывает пунктуацию, математические символы, греческие буквы, знаки валют и сотни специальных символов по стандарту HTML5. W3Schools перечисляет лишь около 255 сущностей; в этом инструменте их более 2200.

Классический браузерный приём — позволить DOM декодировать за вас: создайте отдельный textarea, установите его innerHTML равным строке с сущностями и прочитайте значение. Например: const el = document.createElement('textarea'); el.innerHTML = '&lt;b&gt; &amp; &#169;'; затем el.value вернёт '<b> & ©'. В чистом JavaScript нет встроенного decodeHTMLEntities(), поэтому этот DOM-подход — или небольшая вспомогательная функция, передающая совпадающие токены сущностей в textarea так, чтобы посторонняя разметка не могла выйти за пределы — является стандартным паттерном. Этот инструмент работает именно так, поэтому его безопасно использовать с ненадёжной разметкой без риска XSS.

Это двойное кодирование. Текст был экранирован один раз (превращая & в &amp;), а затем снова (превращая & из &amp; в &amp;amp;) — обычно это происходит потому, что фреймворк автоматически экранирует вывод, который уже был экранирован. Это часто встречается в PHP CMS и некоторых шаблонизаторах, которые по умолчанию экранируют весь вывод — Twig, Smarty и некоторые хуки WordPress так делают. Вставьте значение в декодер здесь один раз, чтобы подтвердить двойное кодирование, затем убедитесь, что шаблон помечает значение как безопасное или экранирует его только один раз в точке вывода.

Используйте &copy; для ©, &reg; для ®, &trade; для ™ и &mdash; для длинного тире (—). Для короткого тире используйте &ndash; (–), а для многоточия — &hellip; (…). Символ можно вставить и напрямую на UTF-8 странице, но именованная сущность однозначна и сохранится при смене кодировки. На UTF-8 странице (а сегодня это практически все) прямая вставка © тоже работает. Именованные сущности остаются наиболее безопасным выбором для HTML-писем, где предположения о кодировке различаются у разных почтовых клиентов: Outlook, Gmail, Apple Mail.

Это &nbsp; (числовые варианты &#160; или &#xA0;). Неразрывный пробел удерживает два слова или значение с единицей измерения на одной строке и предотвращает «схлопывание» нескольких пробелов браузером — например Иван&nbsp;Петров или 5&nbsp;км. Не злоупотребляйте им в вёрстке; для отступов используйте CSS margin или padding. Частая ошибка — использовать несколько &nbsp; для создания отступов или столбцов. Это плохая практика: она ломается при изменении размера страницы и некорректно воспроизводится в скринридерах, которые вслух произносят «неразрывный пробел» для каждого символа.

Да. Именованные сущности чувствительны к регистру: &amp; работает, а &Amp; или &AMP; — нет. При этом &Sigma; (Σ) — совершенно другой символ, нежели &sigma; (σ). Числовые сущности нечувствительны к регистру только в необязательном x у hex-сущности — &#xA9; и &#xa9; оба дают ©. Если сомневаетесь, копируйте точный код из справочного списка здесь, а не вводите его по памяти. Неверный регистр именованной сущности приводит к отображению исходного кода вместо символа — это частый источник ошибок в HTML-шаблонах, написанных вручную.

FreeFormatter.com и W3Schools предоставляют статичные таблицы HTML-сущностей, в которых можно только смотреть коды — нельзя закодировать или декодировать собственный текст. Энкодер FreeFormatter — ближайший аналог, но он требует отправки формы и перезагрузки страницы для каждого преобразования, а список сущностей охватывает только HTML4. W3Schools отображает около 255 именованных сущностей. Этот инструмент охватывает полный набор именованных символов HTML5 — более 2200 записей — и объединяет поиск по справочнику с живым кодировщиком и декодером на одной странице, обновляясь в реальном времени по мере ввода.

Да, кодировщик, декодер и список сущностей полностью работают в мобильных браузерах, включая Chrome на Android и Safari на iPhone. Макет адаптируется к меньшим экранам: две панели выстраиваются вертикально. Совет для мобильных: нажмите и удерживайте ячейку в списке сущностей, чтобы активировать функцию копирования браузера, если копирование одним касанием не срабатывает сразу. Загрузка приложения не нужна — инструмент работает как обычная веб-страница в любом современном мобильном браузере. Нет регистрации, нет аккаунта, нет ограничений на использование ни на одном устройстве. Работает даже офлайн после первоначальной загрузки страницы.