前端如何处理emoji表情

这段时间在作移动端的开发, 有一个功能就是发表评论,其实这个功能自己是比较简单的, 可是在提测是的时候QA给哦提了一个bug,说输入手机自带的emoji表情发送失败了.我就奇怪了,emoji表情也是文本内容,怎么就发送失败呢,我经过Chrome调试以后发现,向后台发送的时候就显示失败了,也就是后台没有存进去,以后我就去找后台联调, 查阅资料以后发现,emoji所占的字节数为4个字节,就是js的编码致使的问题,后台数据库通常设置的是UTF-8存储形式,存储不进去.

那么怎么解决呢, 有好多办法来解决,前端后台均可以解决

1. 后台更改数据库格式

　　执行sql语句将数据库的编码格式改为utf8mb4 存储形式,这种4字节的UTF-8存储形式能够完美的兼容之前的3字节的存储形式,而且能够直接存储emoji表情,这是最完美的解决方案.

2. 使用base-64编码

　　列如可使用base-encode来编码emoji表情以后存储在UTF-8之中,取出的时候decode一下就能够了,可是我没有试过

3. 干掉emoji表情

　　暴力干掉,估计PM不会赞成这么作

4. 前端处理

　　就是经过第三方插件, 将输入的emoji转为span标签,并赋上相应的class,找一大堆emoji,表情图片,向后台发送的时候就是发送span表情,这个后台当让就能够存储了, 这样作的好处就在全部的设备上展现的都是同样的,不会产生歧义,固然缺点就是emoji表情在更新,有可能你所找到的emoji表情图片库不全,有的表情没法展现到页面上,这个就须要按期维护

推荐一个比较好用的插件库 github.com/node-module…

使用方法 先下载emoji插件

<link href="http://cdn.staticfile.org/emoji/0.2.2/emoji.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.staticfile.org/emoji/0.2.2/emoji.js"></script>复制代码

映入这两个代码库,这个插件彻底不须要依赖jquery库

接下来就更加简单了

var text = document.querySelector('emojiText');
cosnoel.log(jEmoji. unifiedToHTML(text.value))复制代码

若是使用了commenJS规范

$ npm install emoji

var emoji = require('emoji');
console.log('😎', emoji.unifiedToHTML('😎'));复制代码