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

Откройте DevTools, посмотрите на HTML-код страницы — и наткнётесь на  , &, " вместо привычных пробелов, амперсандов и кавычек. Это HTML-сущности: браузер понимает их как спецсимволы, а вам при отладке нужно быстро расшифровать. Разберёмся, откуда они берутся и как вернуть человекочитаемый вид.

Что такое HTML-сущности и зачем они нужны

HTML-сущности — способ представить символы, которые имеют особое значение в HTML или которые сложно ввести с клавиатуры. Например, < и > обозначают теги, поэтому в тексте их заменяют на < и >.

Типичные примеры:

•   — неразрывный пробел (не переносится на новую строку)
• & — амперсанд &
• " — двойная кавычка "
• ' — одинарная кавычка '
• © — знак копирайта ©
• — — длинное тире —

Браузер автоматически преобразует сущности при рендере. Но когда вы копируете код из API-ответа, логов или базы данных, получаете закодированную строку — и читать её неудобно.

Почему текст кодируется в сущности

Основная причина — защита от XSS-атак и корректная передача данных. Если пользователь вводит в форму <script>alert('hack')</script>, система должна сохранить это как текст, а не исполняемый код. Для этого < превращается в <, > — в >.

Ещё один сценарий — API-ответы и JSON. Некоторые бэкенды экранируют спецсимволы перед отправкой:

{
  "title": "Статья про "чистый код" & лучшие практики",
  "description": "Руководство для начинающих"
}

При выводе такого текста на страницу без декодирования пользователь увидит кракозябры. Перед рендером нужно преобразовать сущности обратно.

Как декодировать сущности в JavaScript

Самый простой способ — использовать встроенные возможности браузера через DOM.

Метод с textarea

function decodeHTML(text) {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = text;
  return textarea.value;
}

const encoded = 'Статья про "чистый код" & практики';
console.log(decodeHTML(encoded));
// Статья про "чистый код" & практики

Браузер сам распарсит сущности при установке innerHTML, а value вернёт уже декодированный текст.

Метод с DOMParser

function decodeHTML(text) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(text, 'text/html');
  return doc.documentElement.textContent;
}

const encoded = 'Цена — 1000 ₽';
console.log(decodeHTML(encoded));
// Цена — 1000 ₽

Этот вариант надёжнее для сложных случаев, но создаёт полноценный DOM-документ — избыточно для простых строк.

Декодирование в других языках

Python

import html

encoded = 'Статья про "чистый код" & практики'
decoded = html.unescape(encoded)
print(decoded)
# Статья про "чистый код" & практики

Модуль html есть в стандартной библиотеке начиная с Python 3.4.

PHP

$encoded = 'Статья про "чистый код" & практики';
$decoded = html_entity_decode($encoded, ENT_QUOTES | ENT_HTML5, 'UTF-8');
echo $decoded;
// Статья про "чистый код" & практики

Флаг ENT_QUOTES декодирует и одинарные, и двойные кавычки. ENT_HTML5 поддерживает современные сущности вроде '.

Частые ошибки при работе с сущностями

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

let text = 'A B';
text = text.replace(/&/g, '&'); // Кодируем
// Результат: A B

Забытый charset. В PHP без указания UTF-8 кириллица может поломаться:

// Неправильно
$decoded = html_entity_decode($encoded);

// Правильно
$decoded = html_entity_decode($encoded, ENT_QUOTES, 'UTF-8');

Кодирование в атрибутах. В атрибутах HTML нужны разные правила экранирования:

<!-- Неправильно -->
<input value="Статья про &quot;код&quot;">

<!-- Правильно -->
<input value="Статья про &quot;код&quot;" />

Браузер сам декодирует атрибуты, но при формировании HTML-строки в JS нужно явно кодировать кавычки.

Когда декодировать, а когда оставить как есть

Декодируйте, если:

• Отображаете текст в консоли для отладки
• Сохраняете в базу данных как plain text
• Передаёте в JSON-API, где ожидается чистый текст

Оставьте закодированным, если:

• Вставляете напрямую в HTML через innerHTML или шаблонизатор
• Используете текст в атрибутах тегов
• Нужно предотвратить выполнение скриптов

Браузер автоматически декодирует сущности при рендере, поэтому в большинстве случаев достаточно просто вставить текст в DOM.

Инструменты для быстрого декодирования

Когда нужно за секунду расшифровать скопированную строку из API или базы, не хочется писать скрипт. Для таких задач удобен декодер HTML-сущностей — вставляете текст, получаете читаемый результат. Если работаете с URL-параметрами и нужно разобрать, что там зашифровано, пригодится декодер URL. Для обратной операции — защиты от XSS перед вставкой в HTML — используйте кодировщик HTML.