共计 1914 个字符，预计需要花费 5 分钟才能阅读完成。
最近公司的一个需求，需要在 PC 端接收并展示微信发送的消息，那么如何解析微信发送过来的表情？如何在编辑框光标出插入表情？本文将会详细的介绍如何解决这两个问题。
一、PC 端解析微信发送过来的 emoji
首先，我们知道，emoji 的展示实际是图片的展示，input、textarea 是没法展示图片的，所以我们用 div 里 contenteditable=”true” 属性，即可编辑。其次我们要了解，微信发送一个表情过来，后台数据库接收到的是 /::- O 这种特殊字符串，当然，如果是 [微笑] 这种字符串处理方式也一样，对照表可以参考微信默认表情代码和图片包，下载里面的图标到本地，并处理成如下格式
页面展示表情，只需要遍历一下 emoji 数组，拼接一下图片的 url 即可。
当要处理某个字符串里面的 emoji 时候，可遍历 emoji 数组，将后台接收的特殊字符串通过 replace 接口全局替换成对应的图片，反之，同样的方法将图片转化成微信可以解析成 emoji 的特殊字符，下面即是转换的函数
// 将特殊符号转成对应表情 config.imgUrl 图片存放的 url
imgChangeEmoji(str) {
emoji.forEach(element => {
if (str && str.indexOf(element.code) > -1) {
const effectCode = element.code.replace(/[.\\[\]{}()|^$?*+]/g, ‘\\$&’); // 转义字符串中的元字符
const pattern = new RegExp(effectCode, ‘g’);
const imgUrl = `<img src=’${config.imgUrl}/${element.img}’>`;
str = str.replace(pattern, imgUrl);
}
});
return str;
}
// 将对话中的表情图片替换成特殊字符 config.imgUrl 图片存放的 url
emojiChangeImg(str) {
emoji.map(element => {
if (str && str.indexOf(element.img) > -1) {
const imgUrl = `<img src=”${config.imgUrl}/${element.img}”>`;
const pattern = new RegExp(imgUrl, ‘g’);
str = str.replace(pattern, element.code);
}
});
return str;
}
需要特别注意的是，将特殊字符转成 RegExp 的时候，必须先用 replace 进行转义，即 const effectCode = element.code.replace(/[.\[]{}()|^$?*+]/g, ‘\\$&’); 手写转义是无效的。有了上面的解析函数，你只需在发送消息前执行 emojiChangeImg(str)函数即可，同样的，如果想展示接收回来的消息，可以写个指令运行 imgChangeEmoji(str)函数。
二、光标处插入 emoji
在 div 添加 keyup 和 click 事件，如下代码（此处用的是 angualr6）
<div #editBox contenteditable=”true” (keyup)=”handleInputChange()” (click)=”handleClick()”></div>
在 handleInputChange()和 handleClick()和函数里面设置最后光标对象
// 获取选定对象
const selection = getSelection();
// 设置最后光标对象
this.lastEditRange = selection.getRangeAt(0);
选择 emoji 图片时创建一个 img 节点，并插入到最后光标位置，如下代码
const img = new Image();
img.src = `${config.imgUrl}/${emoji.img}`;
const selection = getSelection();
if (this.lastEditRange) {
// 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
selection.removeAllRanges();
selection.addRange(this.lastEditRange);
}
// 选择第一选区
const range = selection.getRangeAt(0);
range.insertNode(img);
range.collapse(false);
即可在光标处插入 img。想了解更多光标对象可参考 html 元素 contenteditable 属性如何定位光标和设置光标