Парсинг HTML-строки JS: извлечение ссылок из текста

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

Способ преобразования строки в HTML при помощи JavaScript на самом деле очень прост благодаря DOMParser:

const parser = new DOMParser();
const doc = parser.parseFromString("<p>Привет</p>", "text/html");
console.log(doc.body.innerHTML); // "<p>Привет</p>", лаконичное приветствие

В этом случае HTML-строка превращается в полноценную структуру DOM, что позволяет использовать все возможности DOM, включая навигацию по документу и внесение изменений. Работа становится быстрой и комфортной!⚡

Подробнее об извлечении определённых элементов

Если вы хотите получить доступ к определённому элементу HTML, например, к ссылкам, это можно сделать примерно так:

const links = doc.querySelectorAll('a');
links.forEach(link => console.log(link.href)); // Все найденные ссылки выводим в консоль. SEO специалисты оценят!

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

Исходный код: "<div>Распаковка HTML DOM <span>начинается</span></div>"

Думайте о разборе как о процессе распаковки HTML:

📦➡️🛠️🏗️➡️🌐

1. 📦 Наш HTML приходит в коробке.
2. ➡️ Мы открываем коробку с возбуждением (разбираем строку).
3. 🛠️ Возьмем в руки инструмент — DOMParser.
4. 🏗️ Извлеченные части собираем в структуру DOM.
5. 🌐 И вуаля — перед нами созданное своими руками DOM-дерево!

Примечание: Совместимость DOMParser может различаться в зависимости от браузера, особенно в мобильных версиях. Возможно, потребуется уделить им дополнительное внимание.

Альтернативные стратегии разбора

Создание фиктивного DOM

Иногда можно применить альтернативные методы, например, создание фиктивного DOM:

const el = document.createElement('div');
el.innerHTML = "<p>Мастерство ниндзя в HTML</p>";

Этот метод заставит улыбнуться мистера Мияги🥷! Но не забывайте о возможных рисках, связанных с использованием innerHTML.

Подробнее об этом расскажет наш спикер на видео

Разбор с помощью jQuery

Если вы предпочитаете jQuery, вот как можно анализировать HTML:

const el = $('<div>').html("<p>jQuery рулит!</p>");
const paragraphs = $('p', el); // Все параграфы выбраны. Без сопротивления.

jQuery упрощает многие задачи и делает работу более предсказуемой.

Манипуляции с DOM Range

const range = document.createRange();
const fragment = range.createContextualFragment("<p>Фрагмент HTML</p>");

Создание DocumentFragment — это более легковесная альтернатива метода innerHTML. Тут действует принцип "Чем меньше, тем лучше".

Особые моменты

Некоторые HTML-элементы, такие как td, tr, th и другие, требуют особого подхода и правильного контекста для их анализа.

Оптимизация производительности и безопасности

Анализ как XML в Chrome

Чтобы улучшить производительность, можно воспользоваться таким методом, как анализ XML:

const xmlString = "<custom-tag>Зигзагообразное преодоление преград</custom-tag>";
const xmlDoc = parser.parseFromString(xmlString, "application/xml");

Это особенность, доступная в основном в браузерах Chrome.

Улучшенная безопасность

Когда работа идет с данными от ненадежных источников, очень важно санитарно обработать HTML, чтобы избежать XSS-атак. В этом случае библиотека DOMPurify может быть вам полезна.

Применение сторонних библиотек

Для работы со сложными HTML-структурами может быть целесообразно использовать специализированные библиотеки, например, Florian:

const clean = Florian.sanitize("<div>Мой <script>evil_script</script></div>");
console.log(clean); // "<div>Мой </div>", опасный скрипт был убран!