如何将含特殊字符的JavaScript字符串拆分为单个字符实体？

这个问题我之前开发Emoji相关组件的时候也踩过坑！你提到的这类特殊符号其实是Unicode字符组合序列（比如带变体选择符U+FE0F、零宽连接符U+200D的Emoji），直接用普通的split('')会把它们拆成多个独立码点，导致显示混乱。下面是几种可靠的解决方案：

1. 使用ES2018+原生Unicode正则表达式 #

Unicode标准把所有Emoji（包括组合序列）归类到Extended_Pictographic类别，我们可以利用这个特性写正则来匹配完整的Emoji实体：

步骤说明： #

• 先把HTML实体（比如🕵）解码成真实的Unicode字符，否则会被当成普通字符串拆分
• 用带u（Unicode模式）和g（全局匹配）标志的正则匹配完整Emoji

代码示例： #

const inputText = "Hello 🕵️‍ world 👏";

// 1. 解码HTML实体（浏览器环境）
const decodedText = new DOMParser().parseFromString(inputText, 'text/html').body.textContent;

// 2. 匹配所有完整的Emoji组合序列
const emojiRegex = /\p{Extended_Pictographic}/gu;
// 如果你需要把普通字符和Emoji都按顺序拆分（保留原文本结构）
const splitResult = decodedText.split(/(\p{Extended_Pictographic}+)/u).filter(part => part);

console.log(splitResult);
// 输出：["Hello ", "🔧️‍", " world ", "👋"]

2. 用第三方库处理更复杂的Emoji场景 #

如果需要支持更全的Emoji类型（比如新出的Unicode 15.0 Emoji，或者带肤色/性别修饰的组合），自己写的正则可能会有遗漏，推荐用维护完善的第三方库：

代码示例（使用emoji-regex库）： #

// 先安装库：npm install emoji-regex
import emojiRegex from 'emoji-regex';

const inputText = "Hello 🕵️‍ world 👏";
const decodedText = new DOMParser().parseFromString(inputText, 'text/html').body.textContent;

const regex = emojiRegex();
const splitEmojis = [...decodedText.matchAll(regex)].map(match => match[0]);
// 如果要混合拆分普通字符和Emoji，同样可以用split方法
const mixedSplit = decodedText.split(new RegExp(`(${regex.source})`, 'u')).filter(part => part);

关键注意事项 #

• 必须先解码HTML实体：如果直接处理🕵这类字符串，会被拆成&、#、1等单个字符，完全达不到预期
• Node.js环境解码替代方案：Node.js没有DOMParser，可以用he库解码HTML实体：import he from 'he'; const decodedText = he.decode(inputText);
• 避免用split('')：普通的字符拆分方法不识别Unicode组合序列，会把Emoji拆成多个无效码点

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