JavaScript正则Negative lookbehind跨浏览器兼容改写方案咨询

嘿，这个问题我之前踩过坑！负向预查（lookbehind）确实是ES2018才引入的特性，Firefox直到较新版本才支持，旧版Edge更是完全不兼容。不过咱们可以换个思路改写正则，既能兼容所有主流浏览器，还能满足你要的「表情前无空格也能匹配」的需求。

核心解决方案：分支匹配替代负向预查 #

核心思路是先匹配并跳过所有包含链接协议的内容，只对不在链接里的表情代码进行替换。具体来说，我们写一个包含两个分支的正则：

1. 第一个分支匹配完整的链接片段（从http://、https://或mailto:开头，直到下一个表情代码之前的内容），这部分原封不动保留；
2. 第二个分支匹配表情代码，这部分替换为对应的图片。

具体代码示例 #

假设你的表情代码是:表情名称:这种格式（比如:smile:），改写后的JavaScript代码如下：

// 假设content是contenteditable div中的内容
const updatedContent = content.replace(
  /(?:https?:\/\/|mailto:)(?:(?!:[\w]+:).)*|(:([\w]+):)/g,
  (match, emojiCode, emojiName) => {
    // 如果匹配到表情代码，替换为对应图片
    if (emojiCode) {
      return `<img src="/emojis/${emojiName}.png" alt="${emojiName}" class="emoji">`;
    }
    // 否则返回原链接内容，不做修改
    return match;
  }
);

正则规则拆解 #

咱们把这个正则拆开看：

• (?:https?:\/\/|mailto:)：非捕获组，匹配http://、https://或mailto:协议开头（s?兼容http和https）；
• (?:(?!:[\w]+:).)*：非捕获组，用负向预查确保匹配的内容里没有表情代码，直到遇到下一个表情代码为止——这样整个链接片段会被完整匹配，不会被拆分；
• |：分支分隔符，要么匹配链接片段，要么匹配表情代码；
• (:([\w]+):)：两个捕获组，捕获组1是完整的表情代码（比如:smile:），捕获组2是表情名称（比如smile），方便拼接图片路径和alt属性。

效果与兼容性说明 #

这个写法完全基于ES5的正则语法，兼容所有主流浏览器（Firefox、Edge、Chrome、Opera全覆盖）。同时满足你要的需求：

• 表情代码前没有空格也能被替换（比如Hello:smile:会正常替换）；
• 链接协议后的表情代码不会被误替换（比如http://example.com:smile:里的:smile:会完整保留）。

如果你的表情代码格式不是:[\w]+:（比如包含连字符等特殊字符），可以修改正则里的表情匹配部分，比如改成:[\w-]+:或者:[\S]+:（匹配非空格的任意字符），根据实际格式调整即可。

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