问题
实现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