我想解析一个包含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来做它吗?
当前回答
如果您愿意使用jQuery，它有一些很好的工具可以从HTML字符串创建独立的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();
编辑-刚刚看到@Florian的答案是正确的。这基本上就是他说的，但是用的是jQuery。
其他回答
要在node.js中做到这一点，可以使用node-html-parser这样的HTML解析器。语法如下所示:
import { parse } from 'node-html-parser';
const root = parse('<ul id="list"><li>Hello World</li></ul>');
console.log(root.firstChild.structure);
// ul#list
// li
// #text
console.log(root.querySelector('#list'));
// { tagName: 'ul',
// rawAttrs: 'id="list"',
// childNodes:
// [ { tagName: 'li',
// rawAttrs: '',
// childNodes: [Object],
// classNames: [] } ],
// id: 'list',
// classNames: [] }
console.log(root.toString());
// <ul id="list"><li>Hello World</li></ul>
root.set_content('<li>Hello World</li>');
root.toString(); // <li>Hello World</li>
这很简单:
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(txt, 'text/html');
// do whatever you want with htmlDoc.getElementsByTagName('a');
根据MDN，要在chrome中做到这一点，你需要像这样解析XML:
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(txt, 'text/xml');
// do whatever you want with htmlDoc.getElementsByTagName('a');
webkit目前不支持它，你必须遵循Florian的回答，而且它在大多数情况下在移动浏览器上是否有效还不得而知。
编辑:现在广泛支持
下面的函数parseHTML将返回:
当你的文件以doctype开始时，你可以使用一个Document。 当你的文件不是以doctype开始时，使用一个DocumentFragment。
代码:
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');
let content = "<center><h1>404 Not Found</h1></center>"
let result = $("<div/>").html(content).text()
content: <center><h1>404 Not Found</h1></center>， 结果:404 Not Found
var doc = new DOMParser().parseFromString(html, "text/html");
var links = doc.querySelectorAll("a");
