用JSparsing一个HTMLstring
我search了一个解决scheme，但没有什么是相关的，所以这里是我的问题：
我想parsing一个包含HTML文本的string。 我想用JavaScript语言来做。 我试过这个库： http : //ejohn.org/blog/pure-javascript-html-parser/但它似乎parsing我的当前页面的HTML，而不是从string。 因为当我尝试下面的代码时，它会改变我的页面的标题：
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外部页面中提取链接，就像string。
你知道一个API来做到这一点吗？
创build一个虚拟DOM元素并将string添加到它。 然后，你可以像任何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
这很简单：
parser=new DOMParser(); htmlDoc=parser.parseFromString(txt, "text/html"); //Do whatever you want with htmlDoc.getElementsByTagName('a');
根据MDN ，要做到这一点铬你需要parsing为XML如下所示：
parser=new DOMParser(); htmlDoc=parser.parseFromString(txt, "text/xml"); //Do whatever you want with htmlDoc.getElementsByTagName('a');
它目前不被webkit支持，你必须遵循Florian的答案，而且在大多数情况下在移动浏览器上工作是未知的。
编辑：现在广泛支持
编辑：下面的解决scheme只适用于HTML“片段”，因为HTML，头部和身体被删除。 我猜这个问题的解决scheme是DOMParser的parseFromString（）方法。
对于HTML片段，这里列出的解决scheme适用于大多数HTML，但是在某些情况下，它不起作用。
例如尝试parsing<td>Test</td> 。 这一个不会在div.innerHTML解决scheme，DOMParser.prototype.parseFromString或range.createContextualFragment解决scheme。 td标签丢失，只剩下文本。
只有jQuery很好地处理这种情况。
所以未来的解决scheme（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"); $As = $('a', $doc);
在Chrome和Firefox中parsingHTML的最快方法是Range＃createContextualFragment：
var range = document.createRange(); range.selectNode(document.body); // required in Safari var fragment = range.createContextualFragment('<h1>html...</h1>'); var firstNode = fragment.firstChild;
我build议创build一个使用createContextualFragment（如果可用）的辅助函数，否则将返回到innerHTML。
基准： http : //jsperf.com/domparser-vs-createelement-innerhtml/3
如果您打算使用jQuery，那么它有一些很好的function，可以从HTMLstring创build分离的DOM元素。 这些可以通过通常的方式来查询，例如：
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。
下面的函数parseHTML将返回：
-
一个
Document当你的文件以文档types开始。 -
一个
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');
