首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >用JS解析HTML字符串

用JS解析HTML字符串
EN

Stack Overflow用户
提问于 2012-05-14 22:11:12
回答 9查看 557.8K关注 0票数 344

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

我尝试过Pure JavaScript HTML Parser library,但它似乎解析了当前页面的超文本标记语言,而不是字符串。因为当我尝试下面的代码时,它会更改我页面的标题:

代码语言:javascript
复制
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吗?

EN

回答 9

Stack Overflow用户

回答已采纳

发布于 2012-05-14 22:14:36

创建一个虚拟DOM元素并将字符串添加到该元素中。然后,您可以像处理任何DOM元素一样操作它。

代码语言:javascript
复制
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答案来取悦粉丝!

代码语言:javascript
复制
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
票数 455
EN

Stack Overflow用户

发布于 2015-10-25 01:52:12

编辑:下面的解决方案仅适用于html“片段”,因为HTML、head和body都被删除了。我猜这个问题的解决方案是DOMParser的parseFromString()方法:

代码语言:javascript
复制
const parser = new DOMParser();
const document = parser.parseFromString(html, "text/html");

对于HTML片段,这里列出的解决方案适用于大多数HTML,但在某些情况下不起作用。

例如,尝试解析<td>Test</td>。这个不适用于div.innerHTML解决方案,也不适用于DOMParser.prototype.parseFromString或range.createContextualFragment解决方案。td标记丢失,只保留文本。

只有jQuery能很好地处理这种情况。

因此,未来的解决方案(MS Edge 13+)是使用模板标记:

代码语言:javascript
复制
function parseHTML(html) {
    var t = document.createElement('template');
    t.innerHTML = html;
    return t.content;
}

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

对于较老的浏览器,我将jQuery的parseHTML()方法提取到一个独立的gist - https://gist.github.com/Munawwar/6e6362dbdf77c7865a99

票数 33
EN

Stack Overflow用户

发布于 2012-05-14 22:18:01

代码语言:javascript
复制
var doc = new DOMParser().parseFromString(html, "text/html");
var links = doc.querySelectorAll("a");
票数 22
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10585029

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档