JavaScript从字符串中去除 HTML 标签

引言

在前端开发中，经常会遇到需要从字符串中提取纯文本内容，去除所有 HTML 标签的场景。本文将探讨几种在 JavaScript 中从字符串中去除 HTML 标签的方法，并分析它们的优缺点，最终解释为什么 DOMParser API 是一个更安全、更可靠的选择。

方法一：使用字符串replace方法

如何实现

可以通过正则表达式与 String.prototype.replace 方法来实现，代码示例如下：

function stripHtmlTags(str) {
  return str.replace(/<[^>]*>/g, '');
}

这段代码通过匹配尖括号及其内部的字符并将它们替换为空字符串，从而去除 HTML 标签。

缺点

尽管这种方法简单快捷，但它有一个显著的缺点：对于复杂的或者不规则的 HTML 结构，正则表达式可能无法完全准确地匹配所有标签，导致清理不彻底或误删文本内容。

方法二：使用HTML元素的 textContent 属性

如何实现

这种方法涉及创建一个临时的 DOM 元素，将字符串作为其 innerHTML，然后返回这个元素的 textContent。实现代码如下：

function stripHtmlUsingTextContent(str) {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = str;
  return tempDiv.textContent || tempDiv.innerText || '';
}

缺点

这种方法的主要缺点是安全风险。如果字符串包含恶意代码，例如：

let str = "<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>"

即便是不将此元素添加到文档中，当执行tempDiv.innerHTML = str 时，恶意脚本也会被执行。这就大大增加了使用这种方法的风险。

方法三：使用 DOMParser API

如何实现

DOMParser API 提供了一种将字符串解析成真实 DOM 节点的方法，从而可以安全地访问这些节点的文本内容。以下是使用 DOMParser 去除 HTML 标签的实现：

function stripHtmlUsingDOMParser(str) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(str, 'text/html');
  return doc.body.textContent || '';
}

这种方法通过将字符串解析为一个 HTMLDocument 对象，然后访问这个对象的 body 属性的 textContent，从而获得纯文本内容，避免了直接操作字符串或 DOM 元素可能带来的安全风险。

缺点

DOMParser 的使用相对简单安全，但其处理大量数据或频繁操作时的性能相比前两种方法略有不足。

结论

虽然使用字符串替换和HTML元素的 textContent 属性可以在某些情况下快速去除 HTML 标签，但它们各自都有缺陷，尤其是安全性问题。考虑到安全性和准确性，DOMParser API 是一个更优的选择。尽管在处理大量数据时可能性能稍微低一些，但它提供了一种更安全、更可靠的方式来去除 HTML 标签，尤其是在处理可能包含恶意代码的字符串时。因此，当安全性成为首要考虑时，应优先选择使用 DOMParser。