О скромном DOMParser замолвите слово

в 15:21, , рубрики: Песочница, метки: , , ,

Данная статья посвящена одному из объектов Web API Interfaces, а именно — DOMParser.
Поиск на Хабре выдаёт 7 статей, где он упоминается лишь вскользь. Мне кажется, это требует исправления.

Коротко и по делу:

  • DOMParser предназначен для парсинга «сырой» строки HTML, XML, SVG в объект. Обратный парсинг также не составляет труда;
  • Для парсинга DOMParser располагает методом «parseFromString». Результатом работы данного метода является объект DOM, а если точнее – это либо объект HTMLDocument (в случае HTML), либо объект Document (в случае XML), либо SVGDocument (в случае SVG);
  • здесь написано что данный объект относится к экспериментальной части API. А вот здесь сказано какими браузерами и их версиями он поддерживается (если коротко – последние версии большой браузерной пятерки поддерживают);
  • далее будет идти речь только в контексте парсинга HTML
  • Наверное, вас интересует вопрос, а все ли сущности HTML попадают в итоговый объект при парсинге? Ответ — все, кроме тега <!doctype>. Согласитесь, это мелочь, в мире нет ничего идеального;
  • С полученным объектом можно «играться» как с любым другим DOM-объектом, легко можно внедриться в него с помощью того же jQuery, заменить там что-нибудь ненужное на что-нибудь нужное. После этого можно выполнить обратный парсинг (из объекта в строку). Тут не забываем про тег !doctype, он исчезнет (см. выше);
  • Что с «обломами»? Есть одна проблемка — если парсинг заканчивается неудачей то исключение не бросается, а возвращается «кривой» объект HTMLDocument. Данный баг имеет красивый номер 45566.

Теперь потренируемся на кошках?

var parser = new DOMParser();  //создаем объект DOMParser
//парсим
var doc = parser.parseFromString(html_text, "text/html");  //html_text - это текст который мы хотим распарсить. Второй аргумент, это MIME-тип, для XML он должен быть равен "application/xml", для SVG - "image/svg+xml") 
var jq = $('a', doc);  //получаем jQuery-коллекцию всех тегов "a"
jq.each(function(){ //заменяем в каждом и теге значение атрибута "href"
   $(this).attr("href", "new.html");
});
//и наконец делаем обратный парсинг
console.log("result="+doc.documentElement.outerHTML);

Засим разрешите откланяться, спасибо за внимание.

P.S. Надеюсь статья будет полезна, замечания приветствуются.

* - обязательные к заполнению поля