Декодирование HTML-сущностей в JavaScript и JQuery

Быстрый ответ

Если вам необходимо быстро декодировать HTML-сущности в JavaScript, вы можете использовать следующий подход: создаём элемент textarea и присваиваем ему textContent, после чего этому свойству присваиваем строку для декодирования:

function htmlDecode(html) {
  var elem = document.createElement('textarea');
  elem.innerHTML = html;
  return elem.textContent;
}

console.log(htmlDecode('The &amp; is &lt;strong&gt;')); // "The & is <strong>"

Воспользовавшись этой функцией, мы с лёгкостью преобразуем HTML-сущности такие как &, < и " в их символьные эквиваленты: &, <, и ", без необходимости подключения дополнительных библиотек.

[AsideBanner]

Эффективное декодирование: Меньше значит больше!

Применение этого метода снижает накладные расходы и неприкосновенна к средам без jQuery, реализуя декодирование с использованием встроенных функций браузера.

На первом месте безопасность: Предотвращаем межсайтовый скриптинг (XSS)

С учетом безопасности рекомендуется присваивать свойству .textContent вместо .innerHTML для предотвращения выполнения вредоносных скриптов при декодировании HTML-сущностей.

Работа со специальными символами: Мастерство владения жонглированием!

В процессе декодирования специальных символов, наша функция htmlDecode продемонстрирует свою надёжность, обеспечив точность и сохранность конечного результата.

Повторное использование: Употребляй и возвращайся

Код для декодирования лучше всего оформить в функцию – для удобства его повторного использования. Для проверки корректности работы кода можно воспользоваться демонстрационными примерами на JSFiddle.

Визуализация

Декодирование HTML-сущностей можно представить как распаковывание конфеты из упаковки. Декодирование в данном случае аналогично процессу удаления обёртки, что в итоге позволяет насладиться чистым текстом, таким же приятным на вкус, как и шоколад без упаковки.

Перед декодированием: 🍫📦📦📦 (Шоколад в упаковке)
После декодирования:  🍫       (Готовый к употреблению шоколад)

Раскрывая слои (📦➡️🍫), мы обнаруживаем всю прелесть перевода HTML-сущностей.

Расширение функциональности с помощью jQuery: Преимущества плагина

Пользователи jQuery могут преобразовать функцию htmlDecode в плагин, чтобы облегчить её использование:

$.fn.htmlDecode = function() {
  return $("<textarea/>").html(this.html()).text();
};

Теперь декодировать HTML-сущности в своих проектах можно с помощью следующего вызова: $(element).htmlDecode().

Фильтрация HTML-сущностей: Устанавливаем защиту!

Чтобы очистить текст от HTML-тегов, используйте следующую функцию:

function sanitize(html) {
  var div = document.createElement('div');
  div.textContent = html;
  return div.innerHTML;
}

Этот способ преобразует все HTML-теги в безопасный текст.

Regex приходит на помощь: Поиск и замена

Вы можете использовать регулярные выражения с заранее созданным списком сущностей, что позволит вам обойтись без создания DOM-элементов:

function regexDecode(html) {
  var entities = {'&amp;': '&', '&lt;': '<', '&gt;': '>', '&quot;': '"'};
  return html.replace(/&amp;|&lt;|&gt;|&quot;/g, function(match) {
    return entities[match];
  });
}

Это предложит возможность адаптировать метод под специфические нужды разработчика, добавляя новые сущности без взаимодействия с DOM.

Полезные материалы

1. Справочник HTML-сущностей W3Schools — подробное описание символов и сущностей HTML.
2. Обсуждение на Stack Overflow о декодировании HTML-сущностей — содержательный источник вопросов и ответов по данной теме.
3. Кодирование и декодирование HTML-сущностей в JavaScript — подборка фрагментов кода для работы с HTML-сущностями.
4. Библиотека He для кодирования и декодирования HTML-сущностей — проверенный репозиторий на GitHub для кодировки и декодировки HTML-сущностей.
5. Кодировщик/декодировщик HTML-сущностей — простой онлайн-инструмент для работы с сущностями.
6. Справочник сущностей символов в HTML 4 — Официальная документация W3C о сущностях символов в HTML 4.
7. Список символов сущностей XML и HTML — энциклопедический список сущностей на Wikipedia.