Limpar HTML 字符串 JS - Javascript

清理 HTML 字符串是提高网站性能和避免安全漏洞的重要步骤。在 Javascript 中，有多种方法可以清理 HTML 字符串，下面将介绍几种常见的方法。

方法 1: 使用 DOMParser

DOMParser 是一个内置的 JavaScript API，它可以将 HTML 字符串解析为 DOM。使用 DOMParser 的好处是它能够自动处理编码和嵌套问题。

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

在上面的代码片段中，我们首先实例化了一个 DOMParser。然后，我们将输入的 HTML 字符串传递给 parseFromString 方法，该方法返回一个 Document 对象。为了获得纯文本内容，我们只需从 Document 对象的 body 属性中提取 textContent 属性即可。

方法 2: 使用 innerText

如果您只需要从 HTML 字符串中提取文本内容，可以使用 innerText 属性。这个方法不如第一种方法安全，因为它不会处理嵌套的 HTML 标签。

function clearHtml(input) {
  const div = document.createElement('div');
  div.innerHTML = input;
  return div.innerText || '';
}

在上面的代码片段中，我们创建了一个 div 元素，并将 HTML 字符串设置为它的 innerHTML 属性。然后，我们从 div 元素中提取 innerText 属性的值。

方法 3: 使用正则表达式

使用正则表达式清理 HTML 字符串是分钟级的事情。但这样也非常危险，因为您很容易错过一些 HTML 标记，从而导致安全漏洞。

function clearHtml(input) {
  return input.replace(/(<([^>]+)>)/gi, "");
}

在上面的代码片段中，我们使用正则表达式替换所有 HTML 标记。这里使用的正则表达式匹配所有 < 和 > 之间的所有字符，并且字母 i 表示无视大小写。

结论

如果您只是想从 HTML 字符串中提取文本，那么使用方法 2 就足够了。如果您需要清理 HTML 字符串以避免安全漏洞，那么使用方法 1 是更安全的选择。尽管正则表达式是一种快速而简单的方法，但使用它可能会导致您忽略一些潜在的安全问题。