DOMParser: примеры (JAVASCRIPT)

Простые примеры использования

Пример 1: Парсинг HTML строки

const htmlString = `<div class=\'container\'>
  <h1>Заголовок</h1>
  <p>Абзац с <span>текстом</span>.</p>
</div>`;
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc.body.querySelector('h1').textContent);

Заголовок

Пример 2: Парсинг XML данных

const xmlString = `<catalog>
  <book id=\'1\'>
    <title>JavaScript для начинающих</title>
    <author>Иван Петров</author>
  </book>
</catalog>`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, 'application/xml');
const title = xmlDoc.querySelector('title').textContent;
console.log(title);

JavaScript для начинающих

Пример 3: Обработка ошибок в XML

const invalidXml = '<root><element>Незакрытый тег';
const parser = new DOMParser();
const result = parser.parseFromString(invalidXml, 'application/xml');
const errorNode = result.querySelector('parsererror');
if (errorNode) {
  console.log('Ошибка парсинга:', errorNode.textContent);
}

Ошибка парсинга: ... (текст ошибки от парсера)

Альтернативные методы в JavaScript

В JavaScript существуют другие способы создания DOM-деревьев из строк.

innerHTML

Свойство innerHTML элемента позволяет установить HTML-строку, которая будет распарсена браузером. Метод работает быстрее для простых операций, но менее безопасен, так как может привести к выполнению встроенного JavaScript.

const div = document.createElement('div');
div.innerHTML = '<span>Текст</span>';
console.log(div.firstChild.tagName);

SPAN

createContextualFragment()

Метод createContextualFragment() объекта Range создает DocumentFragment из строки. Полезен для вставки нескольких узлов без перерисовки DOM. Не поддерживает парсинг XML.

const range = document.createRange();
const fragment = range.createContextualFragment('<p>Абзац</p><p>Еще один</p>');
console.log(fragment.children.length);

2

jQuery.parseHTML()

В библиотеке jQuery есть функция $.parseHTML(), которая безопасно парсит HTML строку в массив DOM узлов. Обеспечивает контекст парсинга и предотвращает выполнение скриптов по умолчанию.

const $nodes = $.parseHTML('<div><b>Жирный текст</b></div>');
console.log($nodes[0].outerHTML);

<div><b>Жирный текст</b></div>

Типичные ошибки

Некорректный MIME-тип

Использование неподдерживаемого MIME-типа приводит к исключению.

try {
  const parser = new DOMParser();
  parser.parseFromString('<p>тест</p>', 'text/plain');
} catch (e) {
  console.error(e.message);
}

... (ошибка, связанная с неподдерживаемым типом)

Игнорирование проверки ошибок в XML

При парсинге XML необходимо проверять наличие элемента parsererror.

const xml = '<корень>';
const doc = new DOMParser().parseFromString(xml, 'application/xml');
if (doc.querySelector('parsererror')) {
  console.log('XML содержит ошибки');
}

XML содержит ошибки

Ожидание обработки скриптов

DOMParser не выполняет JavaScript, встроенный в разметку.

const parser = new DOMParser();
const doc = parser.parseFromString(
  '<script>console.log("выполнен");</script>', 
  'text/html'
);
// Скрипт не будет выполнен

// В консоли ничего не появится

Изменения в последних версиях

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

В современных браузерах улучшена поддержка парсинга SVG при использовании MIME-типа 'image/svg+xml'. Также была добавлена более строгая проверка аргументов, что приводит к исключениям при передаче не строковых значений.

В Node.js нативные реализации DOMParser стали доступны в экспериментальном режиме с версии 18, но для production-среды все еще рекомендуются сторонние библиотеки.

Расширенные примеры применения

Извлечение данных из HTML таблицы

const tableHTML = `
<table>
  <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
  <tr><td>Данные A</td><td>Данные B</td></tr>
</table>
`;
const parser = new DOMParser();
const doc = parser.parseFromString(tableHTML, 'text/html');
const rows = doc.querySelectorAll('tr');
const data = Array.from(rows).map(row => 
  Array.from(row.querySelectorAll('td')).map(cell => cell.textContent)
);
console.log(data);

[['Ячейка 1', 'Ячейка 2'], ['Данные A', 'Данные B']]

Парсинг RSS-ленты (XML)

const rss = `
<rss>
  <channel>
    <item>
      <title>Новость 1</title>
      <link>https://example.com/1</link>
    </item>
  </channel>
</rss>
`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(rss, 'application/xml');
const items = xmlDoc.querySelectorAll('item');
const news = Array.from(items).map(item => ({
  title: item.querySelector('title').textContent,
  link: item.querySelector('link').textContent
}));
console.log(news);

[ { title: 'Новость 1', link: 'https://example.com/1' } ]

Создание SVG элемента

const svgString = `
<svg width=\'100\' height=\'100\'>
  <circle cx=\'50\' cy=\'50\' r=\'40\' fill=\'blue\' />
</svg>
`;
const parser = new DOMParser();
const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
const circle = svgDoc.querySelector('circle');
console.log(circle.getAttribute('fill'));

blue

Очистка HTML от нежелательных тегов

function sanitizeHTML(html, allowedTags) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const elements = doc.body.querySelectorAll('*');
  elements.forEach(el => {
    if (!allowedTags.includes(el.tagName.toLowerCase())) {
      el.parentNode.removeChild(el);
    }
  });
  return doc.body.innerHTML;
}
const dirty = '<div>Хороший текст <script>alert(1);</script></div>';
const clean = sanitizeHTML(dirty, ['div']);
console.log(clean);

<div>Хороший текст </div>

Аналоги функции в других языках

PHP: DOMDocument::loadHTML() / loadXML()

Класс DOMDocument предоставляет методы для парсинга HTML/XML. Более строгий, чем JavaScript DOMParser, требует явного указания кодировки.

$html = '<div>Пример</div>';
$dom = new DOMDocument();
@$dom->loadHTML($html);
echo $dom->textContent;

Пример

Python: xml.etree.ElementTree / BeautifulSoup

Модуль xml.etree.ElementTree для парсинга XML, BeautifulSoup - сторонняя библиотека для парсинга HTML/XML. BeautifulSoup более толерантен к ошибкам разметки.

from bs4 import BeautifulSoup
html = '<p>Текст на Python</p>'
soup = BeautifulSoup(html, 'html.parser')
print(soup.p.string)

Текст на Python

C#: System.Xml.XmlDocument

Класс XmlDocument в .NET Framework для работы с XML. Для HTML парсинга используются сторонние библиотеки, такие как HtmlAgilityPack.

string xml = "<note><body>Содержимое</body></note>";
XmlDocument doc = new XmlDocument();
doc.LoadXml(xml);
Console.WriteLine(doc.DocumentElement.InnerText);

Содержимое