用JS解析HTML字符串

我想解析一个包含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来做它吗?

当前回答

我不得不使用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()">

2021-05-28 16:34:26

其他回答

下面的函数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');

2013-12-09 03:38:55

编辑:下面的解决方案只针对HTML“片段”，因为HTML，头部和身体被删除。我想这个问题的解决方案是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+)是使用模板标签:

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

2015-10-24 17:52:11

如果您愿意使用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。

2012-05-14 14:17:13