我想解析一个包含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来做它吗?
当前回答
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>');
其他回答
var doc = new DOMParser().parseFromString(html, "text/html");
var links = doc.querySelectorAll("a");
我不得不使用Angular NGX Bootstrap弹出窗口中解析的元素的innerHTML。这是对我有效的解决办法。
public htmlContainer = document。createElement('html');
在构造函数
this.htmlContainer.innerHTML = '';setTimeout（（） => { this.convertToArray（）; }）;
convertToArray() {
const shapesHC = document.getElementsByClassName('weekPopUpDummy');
const shapesArrHCSpread = [...(shapesHC as any)];
this.htmlContainer = shapesArrHCSpread[0];
this.htmlContainer.innerHTML = shapesArrHCSpread[0].textContent;
}
在html中
<div class="weekPopUpDummy" [popover]="htmlContainer.innerHTML" [adaptivePosition]="false" placement="top" [outsideClick]="true" #popOverHide="bs-popover" [delay]="150" (onHidden)="onHidden(weekEvent)" (onShown)="onShown()">
要在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>
如果您愿意使用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。
在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;
我建议创建一个helper函数，如果可用，使用createContextualFragment，否则返回innerHTML。
基准:http://jsperf.com/domparser-vs-createelement-innerhtml/3
