如何使用JavaScript正则表达式匹配多行HTML注释？

单行注释的匹配 #

如果是单行HTML注释：

<!--hello world-->

可以用以下JavaScript正则获取该注释：

var expression = /<!--(.*)-->/g

运行示例：

var expression = /<!--(.*)-->/g;

console.log(document.querySelector("div").innerHTML.match(expression)[0]);

对应的HTML结构：

<div>
  <!--hello world-->
</div>

多行注释的匹配问题 #

但如果是多行HTML注释：

<!--hello
world-->

上面的正则就无法匹配，运行下面的代码会报错（因为找不到匹配项）：

var expression = /<!--(.*)-->/g;

console.log(document.querySelector("div").innerHTML.match(expression)[0]); // 会抛出错误，因为没有找到匹配

对应的HTML结构：

<div>
  <!--hello
  world-->
</div>

解决方案 #

要匹配多行HTML注释，需要开启正则的dotAll模式（通过s修饰符），让.可以匹配换行符；同时使用非贪婪匹配.*?避免匹配范围过大。

正确的正则表达式如下：

var expression = /<!--(.*?)-->/gs

• s修饰符：使.能匹配包括换行符在内的所有字符
• .*?：非贪婪匹配，确保只匹配到最近的-->结束标记，防止一次性匹配多个注释内容

运行示例：

var expression = /<!--(.*?)-->/gs;

console.log(document.querySelector("div").innerHTML.match(expression)[0]);

对应的HTML结构：

<div>
  <!--hello
  world-->
</div>

内容的提问来源于stack exchange，提问作者c136