PC端解析微信发送过来的emoji和在光标处插入emoji
最近公司的一个需求,需要在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属性如何定位光标和设置光标