我想解析一个包含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来做它吗?
当前回答
下面的函数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');
其他回答
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>`) );
只有父节点(Range的开始)内的有效子节点才会被解析。否则，可能会出现意想不到的结果:
// <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>');
创建一个虚拟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
我认为最好的方法是这样使用这个API:
//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>
1的方式
使用document.cloneNode ()
性能:
对document.cloneNode()的调用耗时约0.2249999999977299012毫秒。
也许还会更多。
Var t0, t1, html; T0 = performance.now(); html = document.cloneNode(true); T1 = performance.now(); console.log("调用doSomething耗时" + (t1 - t0) + "毫秒。") html.documentElement.innerHTML = '<!负责人html DOCTYPE html > < > < > <标题>测试< /名称> < /头> <身体> test1 < div id = " test1 " > < / div > < /身体> < / html > '; console.log (html.getElementById (test1));
2方法
使用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("调用doSomething耗时" + (t1 - t0) + "毫秒。") html.documentElement.innerHTML = '<!负责人html DOCTYPE html > < > < > <标题>测试< /名称> < /头> <身体> test1 < div id = " test1 " > < / div > < /身体> < / html > '; console.log (html.getElementById (test1));
3路
使用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"));
4路
使用新文档()
性能:
调用document.implementation.createHTMLDocument()耗时约0.13499999840860255毫秒。
请注意
ParentNode。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"));
如果您愿意使用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。
