Разобрать строку 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 для этого?

Создайте фиктивный элемент 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

Изменить: добавив 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

Все довольно просто:

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

Согласно MDN , чтобы сделать это в chrome, вам нужно проанализировать как XML:

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

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

Изменить: теперь широко поддерживается

РЕДАКТИРОВАТЬ: Решение ниже только для HTML «фрагментов», так как HTML, голова и тело удалены. Я думаю, что решение этого вопроса - метод parseFromString () в DOMParser.

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

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

Только 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>');

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

var doc = new DOMParser().parseFromString(html, "text/html");
var links = doc.querySelectorAll("a");

Самый быстрый способ разбора 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.

Тест: http://jsperf.com/domparser-vs-createelement-innerhtml/3

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

• Documentесли файл начинается с DOCTYPE.

• 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();

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

const parse = Range.prototype.createContextualFragment.bind(document.createRange());

document.body.appendChild( parse('<p><strong>Today is:</strong></p>') ),
document.body.appendChild( parse(`<p style="background: #eee">${new Date()}</p>`) );

// <body> is "parent" Node, start of Range
const parseRange = document.createRange();
const parse = Range.prototype.createContextualFragment.bind(parseRange);

// Returns Text "1 2" because td, tr, tbody are not valid children of <body>
parse('<td>1</td> <td>2</td>');
parse('<tr><td>1</td> <td>2</td></tr>');
parse('<tbody><tr><td>1</td> <td>2</td></tr></tbody>');

// Returns <table>, which is a valid child of <body>
parse('<table> <td>1</td> <td>2</td> </table>');
parse('<table> <tr> <td>1</td> <td>2</td> </tr> </table>');
parse('<table> <tbody> <td>1</td> <td>2</td> </tbody> </table>');

// <tr> is parent Node, start of Range
parseRange.setStart(document.createElement('tr'), 0);

// Returns [<td>, <td>] element array
parse('<td>1</td> <td>2</td>');
parse('<tr> <td>1</td> <td>2</td> </tr>');
parse('<tbody> <td>1</td> <td>2</td> </tbody>');
parse('<table> <td>1</td> <td>2</td> </table>');

с помощью этого простого кода вы можете сделать это:

let el = $('<div></div>');
$(document.body).append(el);
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>`);
console.log(el.find('a[href="test0"]'));