正则表达式匹配自定义字符串间内容返回null问题排查

嘿，我一眼就瞅出你代码里的问题啦——你用来拼接正则的起始、结束字符串里，藏着不少正则表达式的特殊元字符，比如<、>、!、-这些，直接把它们拼进正则模板里时，会被当成正则语法解析，而不是你想要匹配的普通文本字符，这就导致正则根本找不到对应的匹配项，所以返回了null。

给你两个实用的解决办法：

方法一：手动转义特殊字符（兼容所有环境） #

先写个工具函数把字符串里的正则特殊字符转义成普通字符，再用来拼接正则：

var string = ` <!--@hello-dear:John--> <h1>John</h1> <!--@bye-dear:John--> `;
var startString = "<!--@hello-dear:John-->";
var endString = "<!--@bye-dear:John-->";

// 转义正则特殊字符的工具函数
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

// 转义后再拼接正则字符串
var regString = escapeRegExp(startString) + "(.*?)" + escapeRegExp(endString);
// 加s修饰符让.能匹配换行（如果你的内容有换行的话），i保留忽略大小写
var regex = new RegExp(regString, "is"); 

console.log(string.match(regex));
// 输出结果里，索引1就是你要的中间内容：" <h1>John</h1> "

方法二：用现代浏览器支持的RegExp.escape() #

如果你的运行环境是现代浏览器（或Node.js 15+），可以直接用原生的RegExp.escape()方法转义，省得自己写工具函数：

var string = ` <!--@hello-dear:John--> <h1>John</h1> <!--@bye-dear:John--> `;
var startString = "<!--@hello-dear:John-->";
var endString = "<!--@bye-dear:John-->";

var regString = RegExp.escape(startString) + "(.*?)" + RegExp.escape(endString);
var regex = new RegExp(regString, "is");

console.log(string.match(regex));

另外补充个小细节：如果你的目标内容里可能包含换行符，一定要加s修饰符，不然.默认是不匹配换行的，会导致匹配不到跨换行的内容。

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