Удаление HTML тегов из текста с помощью JavaScript

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

Хотите без лишних прелюдий удалить HTML-теги? Для этого подойдет функция replace() из JavaScript в сочетании с regex. Магия операции выглядит так: /<[^>]*>/g.

Пример:

let cleanText = '<div>Привет, Мир!</div>'.replace(/<[^>]*>/g, '');
console.log(cleanText); // Вывод "Привет, Мир!", а div где-то далеко.

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

Удаление тегов с учётом различий браузеров

Если HTML-теги отображаются по-разному в разных браузерах, не опускайте руки. Применение методов DOM textContent или innerText помогут в решении данной проблемы.

/** 
* Функция 'Порядок наведу'.
* Очищает строки 'html' от ненужных элементов (HTML-тегов) и возвращает их в первоначальном виде.
*/
function stripHtml(html) {
   let tempHolder = document.createElement("DIV");
   tempHolder.innerHTML = html;
   return tempHolder.textContent || tempHolder.innerText || "";
}

Методы DOM успешно решают проблемы, возникающие при использовании regex и его порой странного взаимодействия со сложными структурами HTML. Полагайтесь на проверенные методы DOM!

Работа с ненадёжным контентом

Боитесь воздействия потенциально опасных HTML-элементов, например, контента, введенного пользователем? Для безопасного анализа и получения текста без активации вредоносных скриптов примените DOMParser.

/** 
* Функция 'Зона риска'.
* Внимательно отслеживает подозрительные элементы, корректно обрабатывает входящий 'html' контент, отключая скрипты.
*/
function safeStripHtml(html) {
   let parser = new DOMParser();
   let doc = parser.parseFromString(html, 'text/html');
   return doc.body.textContent || "";
}

Применение DOMParser обеспечивает безопасность, так как он нейтрализует любые нежелательные скрипты в HTML-контенте.

Безопасность и чистота на первом месте: продвинутые рекомендации

• Чистота — залог здоровья 🧹: Всегда начинайте с надежной обработки введенных пользователем данных для предотвращения XSS-атак. Ознакомьтесь с функцией 'Зона риска' и её верным помощником — API Sanitizer.
• Regex испытывает трудности со сложными структурами: В сложной вложенной структуре или HTML, черезчур наполненном скриптами, regex может налететь на преграды. Действуйте здесь решительно и последовательно!
• В помощники только проверенные: Используйте встроенные в JavaScript функции для удаления тегов, и вам не потребуются дополнительные библиотеки, такие как jQuery.
• Унификация текста: После того, как все теги удалены, подумайте о нормализации текста с помощью toLocaleLowerCase(), чтобы обеспечить его однородное представление.

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

Рассмотрим на примере с HTML-тегами, представленными в виде ценников на фруктах.

Оригинал: "Свежее 🍎<b>Яблоко</b> и спелый <i>Банан</i>🍌"

Нашей задачей является освобождение этих фруктов от ценников и тегов.

Процесс удаления: 🍎<b>Яблоко</b>🍌  ➡️  🍎 Яблоко 🍌

И вот, на наших глазах фрукты освобождаются от тегов:

Очищенное: "Свежее Яблоко и спелый Банан"

От такого результата остается лишь порадоваться эффективности работы JavaScript! 🗡️✨

Продвинутые стратегии удаления

Столкнулись с громоздкими inline стилями? Желаете достичь однородности с помощью нормализации текста? Вот здесь начинается настоящее волшебство:

Подход по обходу парадокса inline-стилей:

// Приступим к упрощению.
function stripStyles(html) {
   let doc = new DOMParser().parseFromString(html, 'text/html');
   Array.from(doc.body.querySelectorAll('*')).forEach(node => node.removeAttribute('style'));
   return doc.body.innerHTML;
}

Стратегия нормализации текста:

// Все по кодексу.
function normalizeAndStrip(html) {
   let text = safeStripHtml(html);
   return text.toLocaleLowerCase(); // Пятница – время для унификации.
}

Особенности производительности

• Более объемные не всегда более эффективные: Если речь идет о большом объеме HTML, работа с innerHTML может быть затруднительной. Иногда стоит обратить внимание на альтернативные подходы.
• Управление DOM: Если у вас множество операций, когда узел отключен , выполнение процесса может проходить более плавно.
• Максимум удобства: Рассмотрите, могут ли данные быть доступны локально, чтобы избежать задержек в загрузке за счет сетевых запросов во время разбора контента.

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

1. Node: textContent property – Web APIs | MDN — Все тонкости работы с текстовыми узлами без HTML-тегов.
2. Strip HTML tags from text using plain JavaScript – Stack Overflow — Сила сообщества в действии. Мудрые советы толпы.
3. JavaScript RegExp Reference — Теряетесь в мире регулярных выражений? Найдите свой путь с нашим руководством по regex.
4. Strip HTML Tags in JavaScript | CSS-Tricks — Полезные рекомендации для продвинутых методов работы с HTML-тегами.
5. Document: createElement() method – Web APIs | MDN — Знакомство с непревзойденным героем, отлично подходящим для работы с текстовыми узлами.
6. Element: innerHTML property – Web APIs | MDN — Посвящение свойству innerHTML, вашему личному помощнику в удалении HTML.
7. Sanitizer – Web APIs | MDN — Новый герой, API Sanitizer, для борьбы с HTML-хаосом.