Данная статья посвящена одному из объектов 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. Надеюсь статья будет полезна, замечания приветствуются.
