如何修复JS字符串转emoji函数误匹配URL中非独立表情代码的问题

核心修改逻辑是为正则匹配添加零宽边界断言，限制仅当表情编码作为独立单元（前后为字符串边界或空白字符）时才触发替换，不会误匹配URL、单词内部的字符片段。

修改后的完整代码如下：

export const CHARS = {
  ":)": "🙂",
  "(:": "🙂",
  ":-)": "🙂",
  ":(": "😞",
  "):": "😞",
  ":-(": "😞",
  ":/": "😕",
}

const convertEmoji = string => {
    const escape = s => s.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")
    const pattern = new RegExp(
      // 前后添加零宽边界断言
      `(?<=^|\\s)(${Object.keys(CHARS).map(escape).join("|")})(?=$|\\s)`,
      "g"
    )
    return string.replace(pattern, match => CHARS[match])
}

效果验证 #

• 输入 ":) Hello world!" → 输出 "🙂 Hello world!"，表情正常替换
• 输入 ":)Hello world!" → 输出 ":)Hello world!"，无空格分隔的表情不替换
• 输入 "https://google.com" → 输出 "https://google.com"，URL 内部的字符不会被误转换
• 输入 "今天天气不错 :)" → 输出 "今天天气不错 🙂"，位于句尾的表情可正常匹配

注：零宽后行断言(?<=)为ES2018规范特性，所有现代浏览器、Node.js 10+版本均已支持，可直接在绝大多数生产环境使用。

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