使用 JS 解析 HTML 字符串

2022-08-29 23:38:39

我想解析一个包含HTML文本的字符串。我想用JavaScript来做。

我尝试了纯JavaScript HTML解析器库,但它似乎解析了我当前页面的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可以做到这一点吗?


答案 1

创建一个虚拟 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

答案 2

这很简单:

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目前不支持它,您必须遵循Florian的答案,并且在大多数情况下在移动浏览器上工作是未知的。

编辑:现在得到广泛支持