PC端解析微信发送过来的emoji和在光标处插入emoji

最近公司的一个需求，须要在PC端接收并展现微信发送的消息，那么如何解析微信发送过来的表情？如何在编辑框光标出插入表情？本文将会详细的介绍如何解决这两个问题。

1、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)函数。

2、光标处插入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属性如何定位光标和设置光标