JavaScript中正则替换邮箱时如何获取完整匹配内容并加粗？

出错根因 #

• 捕获组引用错配：原代码的正则里，([\w-]+\.) 是第一个子捕获组，这个组只能匹配邮箱域名部分最后一段带点的片段（比如匹配test@test.com时，这个组捕获到的内容是test.），根本不是完整的邮箱地址。替换时直接用$1引用这个短片段，就会出现实际运行时只把短片段包进加粗标签的异常结果。
• 占位符使用错误：要把整个正则匹配到的完整内容拿过来替换，应该用$&占位符，而不是代表子捕获组的$1、$2这类引用变量。
• 标签转义错误：原代码替换用的加粗标签被写成了转义后的<b>，这类文本在页面渲染时只会显示成标签原文，不会实际生成能实现加粗效果的HTML标签。

修复后可直接运行的代码 #

var text = "First email test@test.com second email test1@test1.com";
var regexp = /[\w.-]+@([\w-]+\.)+[\w-]{2,4}/g
var text = text.replace(regexp, '<b>$&</b>');
console.log(text);

实际运行输出 #

执行修复后的代码，会得到完全符合预期的结果：
First email <b>test@test.com</b> second email <b>test1@test1.com</b>

补充提示：正则的字符类中，横杠-如果放在两个字符中间容易被解析为范围连接符，建议调整到字符类的开头或结尾位置，从根源上避免潜在的匹配异常。

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