去除 HTML 标签中 JavaScript 正则表达式详解

在前端开发中，我们经常需要从 HTML 内容中去除其中的标签，只保留文本内容。这个问题通常可以使用 JavaScript 的正则表达式来解决。但是，在处理 HTML 时，我们需要排除标签内包含的 JavaScript 代码，否则会出现意外结果。本文将详细介绍如何在 JavaScript 的正则表达式中去除 HTML 标签，并解决标签内 JavaScript 代码的问题。

去除 HTML 标签

首先，让我们回顾一下如何使用 JavaScript 的正则表达式去除 HTML 标签。假设我们有以下 HTML 代码：

<p>Hello, <strong>world</strong>!</p>

要去除标签，我们可以使用如下代码：

const html = "<p>Hello, <strong>world</strong>!</p>";
const text = html.replace(/<[^>]+>/g, "");
console.log(text); // 输出 "Hello, world!"

这个正则表达式 <[^>]+> 匹配任何以 < 开头、以 > 结尾的字符串。这包括所有 HTML 标签，例如 <p>、<strong>、</p> 和 /> 等自闭合标签。所以，调用 replace() 函数时，匹配到的所有字符串都会被替换为空字符串。

排除标签内 JavaScript 代码

然而，如果我们的 HTML 标签中包含 JavaScript 代码，上述正则表达式就不能正常工作了。例如，以下代码：

<p onclick="alert('Hello, world!')">Hello, <strong>world</strong>!</p>

使用上述正则表达式去除标签时，会同时去除 onclick 属性中的 JavaScript 代码，导致意外结果。为了解决这个问题，我们需要修改正则表达式以排除标签内 JavaScript 代码。

一种简单的方法是将正则表达式拆分成两部分：匹配标签名称和匹配标签内的属性。例如，以下代码：

const html = '<p onclick="alert(\'Hello, world!\')">Hello, <strong>world</strong>!</p>';
const text = html.replace(/<(\w+)[^>]*>(.*?)<\/\1>/g, "$2");
console.log(text); // 输出 "Hello, world!"

在这个正则表达式中，<(\w+)[^>]*> 匹配以 < 开头、由一个或多个字母组成的标签名称，后面跟随任意数量的非 > 字符。这个部分可以匹配所有不包含 JavaScript 代码的标签。

接着，我们使用 (.*?) 匹配标签内的任何内容（注意 ? 表示非贪婪匹配，即尽可能少地匹配字符），并用 <\/\1> 匹配闭合标签。最后，我们用 $2 替换整个匹配结果，这个代表匹配的第二个括号中捕获的文本，也就是标签内的内容部分。

结论

在处理 HTML 时，我们需要注意标签内是否包含 JavaScript 代码。如果不包含，可以使用 <[^>]+> 的简单正则表达式去除标签。否则，我们需要修改正则表达式以排除标签内的 JavaScript 代码。本文提供了一种简单的方法来解决这个问题，让你可以方便地从 HTML 中提取出文本内容。

示例代码：

const html = '<p onclick="alert(\'Hello, world!\')">Hello, <strong>world</strong>!</p>';
const text = html.replace(/<(\w+)[^>]*>(.*?)<\/\1>/g, "$2");
console.log(text); // 输出 "Hello, world!"

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11866