Как зарабатывать больше и получать удовольствие от работы?
Вебинар

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

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

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

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

Кинга Идем в IT: пошаговый план для смены профессии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JS
Скопировать код
const range = document.createRange();
const fragment = range.createContextualFragment("<p>Фрагмент HTML</p>");

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

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

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

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

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

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

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

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

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

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

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

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

JS
Скопировать код
const clean = Florian.sanitize("<div>Мой <script>evil_script</script></div>");
console.log(clean); // "<div>Мой </div>", опасный скрипт был убран!
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой метод используется для преобразования HTML-строки в DOM в JavaScript?
1 / 5