我想解析一个包含HTML文本的字符串，我想在JavaScript中实现。
我尝试了Pure JavaScript HTML Parser库，但似乎它解析的是当前页面的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可以做到吗？
创建一个虚拟的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
document.createElement('html')来保留<head>和<body>标签。 - omninonsense这很简单：
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 的答案，并且在大多数移动浏览器中无法正常工作。
编辑：现在得到了广泛的支持。
window 的 documentURL，而该 URL 很可能与字符串的 URL 不同，因此创建的文档中所有相对链接都无法使用。需要注意的是，所有相对链接均已损坏。 - cevingnew DOMParser一次，然后在脚本的其余部分重复使用同一个对象。 - Jack Ghtml 是一个字符串，所以不需要转换。它已经作为字符串表示存在。 - Timo编辑：下面的解决方案仅适用于 HTML “片段”，因为 html、head 和 body 被删除了。我猜这个问题的解决方案是使用 DOMParser 的 parseFromString() 方法：
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+）是使用template标签：
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
<template>标签。它依赖于自定义元素，你可能还需要为其提供polyfill。实际上，你可能只需要使用webcomponents.js来一次性地为自定义元素、模板、影子DOM、Promises等多个功能提供polyfill。 - Jeff Laughlinvar doc = new DOMParser().parseFromString(html, "text/html");
var links = doc.querySelectorAll("a");
const parse = Range.prototype.createContextualFragment.bind(document.createRange());
document.body.appendChild( parse('<p><strong>Today is:</strong></p>') ),
document.body.appendChild( parse(`<p style="background: #eee">${new Date()}</p>`) );
Node（Range的开始）中有效的子Node将被解析。否则，可能会发生意外结果：
// <body> is "parent" Node, start of Range
const parseRange = document.createRange();
const parse = Range.prototype.createContextualFragment.bind(parseRange);
// Returns Text "1 2" because td, tr, tbody are not valid children of <body>
parse('<td>1</td> <td>2</td>');
parse('<tr><td>1</td> <td>2</td></tr>');
parse('<tbody><tr><td>1</td> <td>2</td></tr></tbody>');
// Returns <table>, which is a valid child of <body>
parse('<table> <td>1</td> <td>2</td> </table>');
parse('<table> <tr> <td>1</td> <td>2</td> </tr> </table>');
parse('<table> <tbody> <td>1</td> <td>2</td> </tbody> </table>');
// <tr> is parent Node, start of Range
parseRange.setStart(document.createElement('tr'), 0);
// Returns [<td>, <td>] element array
parse('<td>1</td> <td>2</td>');
parse('<tr> <td>1</td> <td>2</td> </tr>');
parse('<tbody> <td>1</td> <td>2</td> </tbody>');
parse('<table> <td>1</td> <td>2</td> </table>');
在Chrome和Firefox中解析HTML的最快方法是使用Range#createContextualFragment:
var range = document.createRange();
range.selectNode(document.body); // required in Safari
var fragment = range.createContextualFragment('<h1>html...</h1>');
var firstNode = fragment.firstChild;
innerHTML一样，这将执行<img>的onerror。 - Ry-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');
trim方法。请参见https://dev59.com/VnE95IYBdhLWcg3wb9hb。 - Toothbrush//Table string in HTML format
const htmlString = '<table><tbody><tr><td>Cell 1</td><td>Cell 2</td></tr></tbody></table>';
//Parse using DOMParser native way
const parser = new DOMParser();
const $newTable = parser.parseFromString(htmlString, 'text/html');
//Here you can select parts of your parsed html and work with it
const $row = $newTable.querySelector('table > tbody > tr');
//Here i'm printing the number of columns (2)
const $containerHtml = document.getElementById('containerHtml');
$containerHtml.innerHTML = ['Your parsed table have ', $row.cells.length, 'columns.'].join(' ');<div id="containerHtml"></div>要在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>
第一种方法
使用document.cloneNode()
性能是:
调用document.cloneNode()花费了约0.22499999977299012毫秒。
可能还会更长时间。
var t0, t1, html;
t0 = performance.now();
html = document.cloneNode(true);
t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.")
html.documentElement.innerHTML = '<!DOCTYPE html><html><head><title>Test</title></head><body><div id="test1">test1</div></body></html>';
console.log(html.getElementById("test1"));2 Way
使用 document.implementation.createHTMLDocument()
性能表现为:
调用document.implementation.createHTMLDocument()花费了约0.14000000010128133毫秒。
var t0, t1, html;
t0 = performance.now();
html = document.implementation.createHTMLDocument("test");
t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.")
html.documentElement.innerHTML = '<!DOCTYPE html><html><head><title>Test</title></head><body><div id="test1">test1</div></body></html>';
console.log(html.getElementById("test1"));三种方法
使用document.implementation.createDocument()
性能为：
调用document.implementation.createHTMLDocument()花费了约0.14000000010128133毫秒。
var t0 = performance.now();
html = document.implementation.createDocument('', 'html',
document.implementation.createDocumentType('html', '', '')
);
var t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.")
html.documentElement.innerHTML = '<html><head><title>Test</title></head><body><div id="test1">test</div></body></html>';
console.log(html.getElementById("test1"));
四种方法
使用new Document()
性能是:
调用document.implementation.createHTMLDocument()花费了约0.13499999840860255毫秒。
ParentNode.append在2020年是实验性技术。
var t0, t1, html;
t0 = performance.now();
//---------------
html = new Document();
html.append(
html.implementation.createDocumentType('html', '', '')
);
html.append(
html.createElement('html')
);
//---------------
t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.")
html.documentElement.innerHTML = '<html><head><title>Test</title></head><body><div id="test1">test1</div></body></html>';
console.log(html.getElementById("test1"));
doc.getElementsByTagName('a')来读取链接（甚至doc.links）。 - Rob W