无需React.js，如何解析Emoji-Mart表情并替换DOM原生表情？

问题描述 #

我尝试按以下方式运行emoji-mart：

1. 引入脚本：<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
2. 渲染选择器：

emojiOptions = { ... };
const picker = new EmojiMart.Picker(emojiOptions);

emojiMenu.html(picker);

目前上述功能运行正常，但我找不到解析DOM中原生表情的方法。请问能否在不使用React组件的前提下，将文档主体中的原生表情替换为对应的图片？我曾尝试寻找所需的解析库，但未成功。

解决方案 #

emoji-mart的浏览器版自带的EmojiMart.emojiIndex工具可以匹配原生表情，结合DOM遍历就能完成替换，具体实现如下：

核心逻辑 #

• 递归遍历文档中所有文本节点，定位包含原生表情的内容
• 用EmojiMart.emojiIndex.search方法，根据原生表情字符获取对应的表情资源信息
• 将原生表情字符替换为emoji-mart提供的图片元素

实现代码 #

// 递归遍历所有文本节点
function traverseTextNodes(node, callback) {
  if (node.nodeType === Node.TEXT_NODE) {
    callback(node);
  } else {
    for (const child of node.childNodes) {
      traverseTextNodes(child, callback);
    }
  }
}

// 替换文本中的原生表情为图片
function replaceNativeEmojisWithImages() {
  traverseTextNodes(document.body, (textNode) => {
    const text = textNode.textContent;
    if (!text) return;

    // 匹配Unicode原生表情的正则
    const emojiRegex = /[\p{Emoji}]/gu;
    let replacedContent = text.replace(emojiRegex, (emojiChar) => {
      // 通过emoji-mart索引查找对应表情数据
      const matchedEmoji = EmojiMart.emojiIndex.search(emojiChar)[0];
      if (!matchedEmoji) return emojiChar; // 无匹配则保留原字符

      // 生成图片标签
      return `<img class="emoji-mart-emoji" src="${matchedEmoji.src}" alt="${matchedEmoji.name}" title="${matchedEmoji.name}" width="20" height="20">`;
    });

    // 内容有变化时替换原文本节点
    if (replacedContent !== text) {
      const wrapper = document.createElement('span');
      wrapper.innerHTML = replacedContent;
      textNode.replaceWith(...wrapper.childNodes);
    }
  });
}

// 确保emoji-mart加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  replaceNativeEmojisWithImages();
});

注意事项 #

• 必须在emoji-mart脚本加载完成后执行替换函数，DOMContentLoaded事件是合适的时机
• 可根据需求调整图片的尺寸、样式类等属性
• 少数罕见表情可能无法被emoji-mart索引匹配，这类表情会保留原生形式

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