js 如何解析带有html标签的内容

在JavaScript中解析带有HTML标签的内容，通常是为了提取信息或转换HTML结构为可操作的对象。

以下几种方式可以实现：

1. 使用DOMParser

        如果想将HTML字符串解析成DOM节点以便进一步操作（比如查询、修改等），可以使用DOMParser。这是一个非常强大的工具，特别是在处理复杂的HTML结构时。

function parseHTML(htmlString) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(htmlString, 'text/html');
    return doc.body;
}

var htmlString = "<div><h1>Hello</h1><p>World</p></div>";
var parsedHTML = parseHTML(htmlString);

// 现在你可以像操作DOM一样操作parsedHTML
console.log(parsedHTML.querySelector('h1').textContent); // 输出: Hello

2. 使用innerHTML (在浏览器环境中)

        如果是将HTML字符串插入到现有DOM中并让浏览器自动解析，可以直接设置元素的innerHTML属性。

var container = document.getElementById('contentContainer');
var htmlString = "<div><h1>Hello</h1><p>World</p></div>";

// 将HTML字符串插入页面
container.innerHTML = htmlString;

// 现在这个HTML已经成为DOM的一部分，可以进行查询或操作
console.log(container.querySelector('h1').textContent); // 输出: Hello

3. 只提取文本内容（去除HTML标签）

        如果目的是从HTML字符串中提取纯文本内容，而不保留任何HTML结构，可以使用上面提到的removeHTMLTag函数，或者直接利用DOM解析后的文本内容。

function extractTextFromHTML(htmlString) {
    var tempDiv = document.createElement('div');
    tempDiv.innerHTML = htmlString;
    return tempDiv.textContent || tempDiv.innerText || '';
}

var htmlString = "<p>Some <b>bold</b> and <i>italic</i> text.</p>";
console.log(extractTextFromHTML(htmlString)); // 输出: Some bold and italic text.