如何将字符串中所有冒号格式自定义emoji批量替换为对应的img标签

核心实现思路是使用带全局修饰符的正则匹配所有符合格式的emoji标记，一次性完成全部替换，无需手动拆分字符串。

场景1：直接生成HTML字符串 #

// 构建短名与图片地址的映射表，提升查找效率
const emojiMap = {}
customEmojis.forEach(item => {
  const shortName = item.short_names[0]
  emojiMap[shortName] = item.imageUrl
})

// 构建全局正则，匹配所有:短名:格式的emoji标识
const emojiReg = new RegExp(`:(${Object.keys(emojiMap).join('|')}):`, 'g')

// 全局替换所有匹配的emoji
const finalHtml = newMessage.replace(emojiReg, (_, shortName) => {
  return `<img style="width: 25px" src="${emojiMap[shortName]}" alt="${shortName}">`
})

输出的finalHtml就是完成全部替换后的HTML字符串。

场景2：React框架下生成JSX（避免XSS风险） #

如果是在React项目中使用，不推荐直接插入HTML字符串，可以用拆分字符串生成JSX节点的方案：

// 封装转换方法
const parseEmojiMessage = (rawText) => {
  const emojiMap = {}
  customEmojis.forEach(item => {
    const shortName = item.short_names[0]
    emojiMap[shortName] = item.imageUrl
  })
  // 用正则把文本拆分为普通文本和emoji标记的数组
  const reg = new RegExp(`(:${Object.keys(emojiMap).join('|')}:)`, 'g')
  const contentParts = rawText.split(reg)
  
  return contentParts.map((part, idx) => {
    // 匹配到emoji标记则返回img组件
    if (part.startsWith(':') && part.endsWith(':')) {
      const shortName = part.slice(1, -1)
      if (emojiMap[shortName]) {
        return <img key={idx} style={{width: 25}} src={emojiMap[shortName]} alt={shortName} />
      }
    }
    // 普通文本直接返回
    return part
  })
}

// 组件内直接使用
<p>{parseEmojiMessage(newMessage)}</p>

原代码问题说明 #

你原来的代码只能替换第一个emoji，是因为遍历emoji列表时仅截取了第一个匹配项的前后内容，只保留了一个img和最后一段文本的变量，没有累积所有替换结果，自然只能处理第一个匹配的emoji。

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