使用javascript过滤html的字符串(注释标记法)

要使用 JavaScript 过滤 HTML 字符串，我们可以使用注释标记法来实现。注释标记法是指在 HTML 代码中插入特殊的注释标记，然后使用正则表达式来匹配并过滤掉这些标记，最后返回一个干净的字符串。

下面是实现注释标记法的几个步骤：

1. 插入注释标记

在需要过滤的 HTML 字符串中，我们可以手动插入注释标记来标识需要过滤的部分。注释标记以<!--开头，以-->结尾，中间包含具体内容。比如，我们要过滤掉一个 <script> 标签：

var htmlStr = '<div><h1>Hello, World!</h1><script>alert("Hello, World!")</script></div>';

我们可以在 <script> 标签前后分别加上注释标记：

var htmlStr = '<div><h1>Hello, World!</h1><!--script--><script>alert("Hello, World!")</script><!--/script--></div>';

2. 编写正则表达式

接下来，我们可以使用正则表达式来匹配注释标记，并将注释标记及其中的内容过滤掉。以下正则表达式可以匹配以<!--开头，以-->结尾，中间包含script的注释标记：

var regex = /<!--\s*script\s*-->[\s\S]*?<!--\s*\/script\s*-->/gi;

我们可以使用replace()方法将匹配到的注释标记及其中的内容替换为空字符串，从而过滤掉这部分 HTML 代码：

var cleanHtml = htmlStr.replace(regex, '');
console.log(cleanHtml); // 输出：<div><h1>Hello, World!</h1></div>

示例说明

示例1：过滤掉HTML代码中的JavaScript标签

假如我们有一个 HTML 代码字符串，其中包含一些 JavaScript 标签：

var htmlStr = '<div><h1>Hello, World!</h1><script>alert("Hello, World!")</script></div>';

我们可以使用以上的步骤，将 JavaScript 标签过滤掉：

var regex = /<!--\s*script\s*-->[\s\S]*?<!--\s*\/script\s*-->/gi;
var cleanHtml = htmlStr.replace(regex, '');
console.log(cleanHtml); // 输出：<div><h1>Hello, World!</h1></div>

这样我们就可以得到一个不包含 JavaScript 标签的 HTML 代码字符串。

示例2：过滤掉HTML代码中的样式标签和注释

假如我们有一个 HTML 代码字符串，其中包含一些样式标签和注释：

var htmlStr = '<div><style>p {color: red;}</style><!-- This is a comment --><p>Hello, World!</p></div>';

我们可以使用以上的步骤，将样式标签和注释都过滤掉：

var regex = /<!--\s*\w*\s*-->[\s\S]*?<!--\s*\/\w*\s*-->/gi;
var cleanHtml = htmlStr.replace(regex, '');
console.log(cleanHtml); // 输出：<div><p>Hello, World!</p></div>

这样我们就可以得到一个不包含样式标签和注释的 HTML 代码字符串。