如何在JavaScript中实现emoji识别并替换为指定标签的功能？

核心逻辑 #

通过Unicode属性正则匹配字符串内的所有emoji字符，全局替换为包裹了指定class的span标签结构。

具体代码实现 #

function parseEmoji(str) {
  // 匹配所有emoji字符的正则表达式
  const emojiReg = /\p{Extended_Pictographic}/gu;
  return str.replace(emojiReg, (match) => {
    return `<span class="emoji">${match}</span>`;
  });
}

使用示例 #

输入：

parseEmoji('hello 😊 world 😊')

输出结果：

hello <span class="emoji">😊</span> world <span class="emoji">😊</span>

补充说明 #

• 正则中的u修饰符是开启Unicode匹配的必要参数，g修饰符确保匹配字符串中所有符合规则的emoji，而非仅第一个。
• 该正则语法兼容Chrome 64+、Firefox 78+、Safari 11.1+、Node.js 10+运行环境，若需要适配更低版本，可引入预编译的兼容emoji正则规则。
• 给.emoji类添加CSS样式即可调整emoji显示尺寸，示例样式：

.emoji {
  font-size: 2em; /* 按需调整大小 */
  vertical-align: middle; /* 对齐行内文本 */
}

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