Разбор 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, чтобы сделать это?
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
самый быстрый способ разбора 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