Конвертация символов в HTML сущности c JavaScript

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

Для удобного кодирования HTML-сущностей в JavaScript можно воспользоваться возможностями DOM и преобразовать строки с помощью одной команды:

const encodeHTMLEntities = str => document.createElement('div').appendChild(document.createTextNode(str)).parentNode.innerHTML;

Присвоив переменной str вашу строку, вы получите ее закодированное представление:

console.log(encodeHTMLEntities('<script>alert("x")</script>')); // Вывод: &lt;script&gt;alert("x")&lt;/script&gt;

Великий regex на страже справедливости

Если использование DOM невозможно, например, в серверном JavaScript, то бесценной станет помощь мощного regex. Следующий код использует заранее подготовленную таблицу замен с использованием расширенного регулярного выражения:

const entityMap = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;'
};
function escapeHtml(string) {
  return String(string).replace(/[&<>"'`=\/]/g, (s) => entityMap[s]);
}

Этот процесс замены поможет предотвратить XSS-атаки и гарантирует корректное отображение контента в разных браузерах.

Возвращение в прошлое, или совместимость браузеров

"Старое" иногда означает "надёжное", но старые версии браузеров могут не поддерживать новые методы. Поэтому всегда стоит иметь запасной вариант:

function encodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.textContent = text;
  return textArea.innerHTML;
}

Эта функция использует свойство textContent, обеспечивая надёжность, особенно учитывая ограниченную поддержку, например, в Internet Explorer до 9 версии включительно.

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

Пример строки до и после кодирования:

Без кодирования: "Боб сказал: <b>жирно</b> & "ярко""
С кодированием: "Боб сказал: &lt;b&gt;жирно&lt;/b&gt; &amp; &quot;ярко&quot; идея"

Спецсимволы заменены на соответствующие HTML-сущности:

• < становится <
• > становится >
• & становится &
• " становится "

Таблица HTML-сущностей для символов:

Эти символы обеспечат корректное отображение исходного контента в браузере.

Война без опоры на посторонние ресурсы

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

Активная защита: проактивное кодирование

"Лучше предупредить, чем лечить" – это утверждение актуально и в области программирования. Проактивное кодирование – это защита от атак XSS. Она заключается в замене возможно опасных символов на безопасные HTML-сущности.

Ниндзя-обновление: textContent

Свойство Node.textContent идеально подходит для безопасного присвоения контента в элемент, тем самым нейтрализуя любые HTML-элементы и скрипты:

function safelySetContent(element, content) {
  element.textContent = content;
}

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

1. Форматирование текста в JavaScript | MDN — руководство по последовательностям экранирования в JavaScript.
2. Глифы | CSS-Tricks — справочник по HTML-глифам для расширения типографики.
3. HTML символьные сущности — руководство W3Schools по использованию HTML-сущностей.
4. GitHub – mathiasbynens/he: Надежный HTML-кодировщик/декодировщик на JavaScript. — открытая библиотека для кодирования и декодирования HTML.
5. HTML стандарт — официальная спецификация WHATWG по использованию именованных ссылок на символы.
6. GitHub – douglascrockford/JSMin: инструмент для минификации JavaScript — компактное и эффективное средство для минификации вашего JavaScript-кода.