HTML-сущности — это заменители специальных символов в HTML. Символы, такие как <, >, &, " и ', имеют определённое значение в HTML и должны быть экранированы, чтобы избежать нарушения структуры документа. При получении HTML с сервера или из пользовательского ввода часто необходимо декодировать эти сущности для правильного отображения и обработки. В этой статье рассматриваются два метода декодирования HTML-сущностей с помощью JavaScript.
Содержание
- Декодирование HTML-сущностей с помощью Vanilla JavaScript
- Декодирование HTML-сущностей с помощью библиотеки
he
Декодирование HTML-сущностей с помощью Vanilla JavaScript
Vanilla JavaScript предоставляет простой способ декодирования HTML-сущностей с использованием встроенного в браузер DOMParser. Этот метод эффективен и не требует внешних библиотек. Однако он может не идеально обрабатывать все сущности, особенно редкие или пользовательские.
function decodeHTMLEntities(text) {
const doc = new DOMParser().parseFromString(text, 'text/html');
return doc.documentElement.textContent;
}
// Пример использования:
const encodedText = '<p>Это абзац с & внутри.</p>';
const decodedText = decodeHTMLEntities(encodedText);
console.log(decodedText); // Вывод: Это абзац с & внутри.
Эта функция разбирает входную строку как HTML с помощью DOMParser. Свойство textContent корневого элемента затем возвращает декодированный текст, удаляя HTML-теги и заменяя сущности. Обратите внимание, что этот метод также удаляет все HTML-теги, присутствующие во входных данных.
Декодирование HTML-сущностей с помощью библиотеки he
Для более полного декодирования, особенно для более широкого диапазона сущностей, библиотека he является надёжным решением. Она лёгкая и легко доступна через npm или CDN.
Установка (npm):
npm install he
Установка (CDN — jsDelivr):
<script src="https://cdn.jsdelivr.net/npm/he"></script>
После установки используйте функцию he.decode():
// Предполагается, что библиотека 'he' подключена
const encodedText = '<p>Это абзац с & и ' внутри.</p>';
const decodedText = he.decode(encodedText);
console.log(decodedText); // Вывод: Это абзац с & и ' внутри.
he.decode() обрабатывает более широкий спектр сущностей, включая числовые сущности, такие как ' (одинарная кавычка).
Выбор метода
Оба метода эффективно декодируют HTML-сущности. Подход с использованием Vanilla JavaScript подходит для простых случаев и позволяет избежать внешних зависимостей. Для сложных сценариев или более широкого диапазона сущностей библиотека he обеспечивает более надёжное решение. Всегда очищайте пользовательский ввод, чтобы предотвратить уязвимости безопасности.