js怎么删除一个emoji表情符号

问题

实现JavaScript聊天项目中，在删除最后一个字符功能发现，并不能良好的处理Emoji表情，用户可能需要点按删除按钮 2次甚至N+次才会删除一个Emoji表情。

背景

在JavaScript中，字符串字符与单独的Emoji表情之间并不总是存在一对一的关系。某些Emoji表情由多个字符表示。这可能会导致分割字符串时出现问题，并且无意中将多字母字母切成两半，或者当您需要统计字符串中的实际长度时出现错误。

举例

console.log('?'.length);
//输出 >> 2

console.log('?‍?‍?‍?'.length);
//输出 >> 11

console.log('?'[0]);
//输出 >> �

解决方案

使用grapheme-splitter来分割含有Emoji表情的字符串

• 安装 npm install grapheme-splitter --save
• 引入import GraphemeSplitter from 'grapheme-splitter'
  或var GraphemeSplitter = require('grapheme-splitter')

分割字符串

var splitter = new GraphemeSplitter();
var graphemes = splitter.splitGraphemes('Hi??‍?‍?‍?!');

console.log(graphemes);
//输出 >> ['H', 'i', '?', '?‍?‍?‍?', '!']

实现删除最后一个字符的需求

function deleteLastChar(str){
	var splitter = new GraphemeSplitter();
	var graphemes = splitter.splitGraphemes(str);//将含有表情的字符串分割成数组
	graphemes.pop();//删除数组中最后一个元素
	return graphemes.join('');//将数组还原成字符串
}

console.log(deleteLastChat('??‍?‍?‍?'));
//输出 >> '?'

grapheme-splitter的核心实现比较粗暴，它预先将所有Emoji表情编码存入字典，并在分割字符串时匹配这个字典

技术资料

• JS的Unicode问题(阐述了Emoji表情问题和解决方案) https://mathiasbynens.be/notes/javascript-unicode
• grapheme-splitter项目地址 https://github.com/orling/grapheme-splitter