iOS中使用Unicode字符类转义取反时Emoji显示异常问题

问题描述 #

我使用正则表达式移除字符串中的非拉丁字符与非Emoji字符，借助Unicode字符类转义简化表达式，代码如下：

const regex = new RegExp('[^(\\d\\s\\p{Script=Latin}\\p{gc=Punctuation}\\p{Extended_Pictographic})]+', 'gui');

function removeUnsupportedChars(txt: string) {
   return txt.replace(this.characterEx, '');
}

该代码在PC端和Android设备上运行正常，但在iOS设备上，Emoji会损坏并显示为方块。简化正则后发现：iOS上只要对Extended_Pictographic类（或其他Emoji类）取反，就会导致Emoji损坏。请问这是iOS的已知问题吗？有没有除显式Emoji列表外的解决方法？

解决方案 #

• 这是iOS Safari/WebKit的已知兼容性Bug，WebKit对Unicode属性类Extended_Pictographic的取反处理存在缺陷，会错误拆分带修饰符的复合Emoji（如肤色、性别修饰的Emoji），导致显示异常。
• 可以换一种思路规避问题：保留允许的字符，而非移除禁止的字符，避免直接对Extended_Pictographic取反：
  1. 改为匹配所有符合要求的字符，再将匹配结果拼接成字符串
  2. 修改后的代码示例：

// 匹配所有允许保留的字符
const regex = new RegExp('[\\d\\s\\p{Script=Latin}\\p{gc=Punctuation}\\p{Extended_Pictographic}]', 'gui');

function removeUnsupportedChars(txt: string) {
  const matches = txt.match(regex) || [];
  return matches.join('');
}

• 这种写法避开了取反操作，在iOS上能正常保留Emoji，同时实现过滤非允许字符的需求。

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