Разбор HTML-строки с помощью JS



Я искал решение, но ничего не было уместно, так что вот моя проблема:



Я хочу разобрать строку, которая содержит текст HTML. Я хочу сделать это в JavaScript.



пробовал библиотека но кажется, что он анализирует HTML-код моей текущей страницы, а не из строки. Потому что когда я пробую код ниже, он меняет название моей страницы:



var parser = new HTMLtoDOM("<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>", document);


моя цель состоит в том, чтобы извлечь ссылки из HTML внешней страницы, которую я читаю так же, как строка.



вы знаете API, чтобы сделать это?

597   7  

7 ответов:

создайте фиктивный элемент DOM и добавьте к нему строку. Затем вы можете управлять им как любым элементом DOM.

var el = document.createElement( 'html' );
el.innerHTML = "<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>";

el.getElementsByTagName( 'a' ); // Live NodeList of your anchor elements

Edit: добавление ответа jQuery, чтобы порадовать поклонников!

var el = $( '<div></div>' );
el.html("<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>");

$('a', el) // All the anchor elements

Это довольно просто:

parser=new DOMParser();
htmlDoc=parser.parseFromString(txt, "text/html");
// do whatever you want with htmlDoc.getElementsByTagName('a');

согласно MDN, для этого в chrome вам нужно разобрать как XML вот так:

parser=new DOMParser();
htmlDoc=parser.parseFromString(txt, "text/xml");
// do whatever you want with htmlDoc.getElementsByTagName('a');

в настоящее время он не поддерживается webkit, и вам придется следовать ответу Флориана, и в большинстве случаев он неизвестен для работы в мобильных браузерах.

Edit: теперь широко поддерживается

EDIT: Решение ниже предназначено только для HTML "фрагментов", так как html, голова и тело удаляются. Я думаю, что решение этого вопроса является методом parseFromString() DOMParser.


для фрагментов HTML решения, перечисленные здесь, работают для большинства HTML, однако в некоторых случаях это не сработает.

например попробуйте разобрать <td>Test</td>. Этот не будет работать на div.решение innerHTML и DOMParser.прототип.parseFromString и ассортимент.createContextualFragment решение. В тег td пропадает и остается только текст.

только jQuery обрабатывает этот случай хорошо.

таким образом, будущее решение (MS Edge 13+) заключается в использовании тега шаблона:

function parseHTML(html) {
    var t = document.createElement('template');
    t.innerHTML = html;
    return t.content.cloneNode(true);
}

var documentFragment = parseHTML('<td>Test</td>');

для старых браузеров я извлек метод parseHTML() jQuery в независимый gist -https://gist.github.com/Munawwar/6e6362dbdf77c7865a99

var $doc = new DOMParser().parseFromString($html, "text/html");
$As = $('a', $doc);

самый быстрый способ разбора HTML в Chrome и Firefox-это Range#createContextualFragment:

var range = document.createRange();
range.selectNode(document.body); // required in Safari
var fragment = range.createContextualFragment('<h1>html...</h1>');
var firstNode = fragment.firstChild;

Я бы рекомендовал создать вспомогательную функцию, которая использует createContextualFragment, если она доступна, и в противном случае возвращается к innerHTML.

Benchmark:http://jsperf.com/domparser-vs-createelement-innerhtml/3

следующая функция parseHTML вернется либо :

  • a Document когда файл начинается с параметра "DOCTYPE".

  • a DocumentFragment когда ваш файл не начинается с параметра "DOCTYPE".


код :

function parseHTML(markup) {
    if (markup.toLowerCase().trim().indexOf('<!doctype') === 0) {
        var doc = document.implementation.createHTMLDocument("");
        doc.documentElement.innerHTML = markup;
        return doc;
    } else if ('content' in document.createElement('template')) {
       // Template tag exists!
       var el = document.createElement('template');
       el.innerHTML = markup;
       return el.content;
    } else {
       // Template tag doesn't exist!
       var docfrag = document.createDocumentFragment();
       var el = document.createElement('body');
       el.innerHTML = markup;
       for (i = 0; 0 < el.childNodes.length;) {
           docfrag.appendChild(el.childNodes[i]);
       }
       return docfrag;
    }
}

как использовать :

var links = parseHTML('<!doctype html><html><head></head><body><a>Link 1</a><a>Link 2</a></body></html>').getElementsByTagName('a');

Если вы открыты для использования jQuery, он имеет некоторые хорошие возможности для создания отдельных элементов DOM из строк HTML. Затем их можно запросить с помощью обычных средств, например:

var html = "<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>";
var anchors = $('<div/>').append(html).find('a').get();

Edit-просто увидел ответ @ Florian, который является правильным. Это в точности то, что он сказал, но с jQuery.

Comments

    Ничего не найдено.