如何使用 JavaScript 从字符串中去除 HTML 标签？

在前端开发中，我们经常需要处理从后端传过来的 HTML 标签，比如展示外部文章、富文本编辑器等等。在这些情况下，我们需要从 HTML 内容中去除标签，只展示纯文本内容。

以下是一些方法，可以帮助你在 JavaScript 中去除 HTML 标签。

方法一：使用正则表达式

正则表达式是一种非常强大的匹配文本的工具，在 JavaScript 中也可以用来去除 HTML 标签。以下是一个示例：

function stripHtml(html) {
  let stripped = html.replace(/(<([^>]+)>)/gi, "");
  return stripped;
}

这个函数使用正则表达式匹配 HTML 标签，并将其替换为空字符串。它的实现方式简单明了，并且可以应对大部分情况。

方法二：使用 DOM API

在 JavaScript 中，我们可以使用 DOM API 来访问 HTML 中的元素，通过遍历 DOM 树，我们可以取出其中的文本节点，从而得到纯文本内容。以下是一个示例：

function stripHtml(html) {
  let doc = new DOMParser().parseFromString(html, "text/html");
  return doc.body.textContent || "";
}

这个函数使用 DOMParser API 将 HTML 文本转化为 DOM 对象，然后使用textContent属性返回其中的纯文本内容。这种方式可以处理一些比较复杂的情况，但是相对于正则表达式，它可能会有一些性能问题。

综合考虑

实际开发中，我们可以根据具体的情况进行选择，结合正则表达式和 DOM API，来达到更好的效果。下面是一个综合考虑的示例：

function stripHtml(html) {
  let doc = new DOMParser().parseFromString(html, "text/html");
  let stripped = doc.body.textContent || "";
  stripped = stripped.replace(/\s\s+/g, " ");
  return stripped.trim();
}

该函数首先使用 DOMParser API 将 HTML 转化为 DOM 对象，然后使用textContent属性返回其中的文本内容。接着，使用正则表达式去掉文本中多余的空格，最后使用trim()方法去除字符串两端的空格。这个函数可以满足大部分情况下的需求，但是在一些特殊情况下可能需要进一步优化。