JavaScript去除HTML中所有标签的方法

在前端开发中，有时我们需要从包含HTML标签的文本中提取纯文本内容，也就是去除所有的HTML标签。JavaScript提供了多种实现这一功能的方法，下面我们就来详细探讨一下。

第一种常见的方法是使用正则表达式。通过定义一个匹配HTML标签的正则表达式模式，然后使用字符串的replace方法将所有匹配到的标签替换为空字符串。例如：

function stripTags(html) {
    return html.replace(/<[^>]*>/g, '');
}
let htmlText = "<p>这是一段包含 <a href='#'>链接</a> 的HTML文本</p>";
let plainText = stripTags(htmlText);
console.log(plainText); 

在上述代码中，正则表达式 /<[^>]*>/g 会匹配所有以 < 开头，以 > 结尾的标签字符串，g 标志表示全局匹配。replace方法会将所有匹配到的标签替换为空字符串，从而得到纯文本内容。

第二种方法是借助DOM操作。我们可以创建一个临时的DOM元素，将包含HTML标签的文本设置为该元素的innerHTML，然后通过访问该元素的textContent属性来获取纯文本。代码如下：

function stripTagsUsingDOM(html) {
    let tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;
    return tempDiv.textContent || tempDiv.innerText;
}
let htmlText2 = "<span style='color:red'>红色文本</span>";
let plainText2 = stripTagsUsingDOM(htmlText2);
console.log(plainText2); 

这里先创建了一个div元素，将HTML文本赋值给它的innerHTML属性，然后通过textContent（在现代浏览器中更常用）或innerText（在一些旧浏览器中可能更可靠）获取该元素的纯文本内容。

这两种方法各有优缺点。正则表达式方法简洁高效，适用于简单的HTML文本处理，但对于复杂的HTML结构可能会出现匹配不准确的情况。而借助DOM操作的方法更加准确和健壮，能够处理各种复杂的HTML结构，但由于涉及到DOM操作，性能上可能会稍逊一筹。

在实际应用中，我们需要根据具体的需求和场景来选择合适的方法，以便高效准确地去除HTML中的所有标签，获取到我们需要的纯文本内容。