JS 中高效去除 HTML 标签的方法

在 JavaScript 的开发过程中，我们常常会遇到需要从字符串中去除 HTML 标签的需求，比如从富文本编辑器中提取纯文本内容。以下为您介绍几种高效去除 HTML 标签的方法。

正则表达式法

正则表达式是处理字符串模式匹配的强大工具。通过定义特定的正则表达式模式，可以精准地匹配并去除 HTML 标签。示例代码如下：

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

在上述代码中，/<[^>]*>/g 这个正则表达式模式的含义是：/ 表示正则表达式的开始和结束；^ 表示匹配开头；> 表示匹配结束；* 表示前面的字符出现 0 次或多次；g 表示全局匹配。整个表达式的意思是匹配所有尖括号内的内容，然后通过 replace 方法将其替换为空字符串，从而实现去除 HTML 标签的目的。

DOM 解析法

借助浏览器的 DOM 解析功能也可以去除 HTML 标签。我们可以创建一个临时的 DOM 元素，将包含 HTML 标签的字符串设置为该元素的 innerHTML，然后获取其 textContent。示例代码如下：

function removeHtmlTagsUsingDOM(str) {
    const temp = document.createElement('div');
    temp.innerHTML = str;
    return temp.textContent || temp.innerText;
}
let htmlStr = "<p>这是一段包含 <a href='#'>链接</a> 的 HTML 文本</p>";
let result = removeHtmlTagsUsingDOM(htmlStr);
console.log(result); 

在这段代码中，首先创建了一个 div 元素，将 HTML 字符串设置为其 innerHTML。由于 textContent 或 innerText 属性会返回元素及其后代的纯文本内容，所以通过这种方式就可以得到去除 HTML 标签后的文本。

在实际应用中，正则表达式法性能较高，适用于简单的文本处理场景；而 DOM 解析法更适用于复杂的 HTML 结构处理，它能够更好地处理一些特殊字符和嵌套标签的情况。开发者可以根据具体需求选择合适的方法，以实现高效去除 HTML 标签的目的，提升开发效率。