前端如何處理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表情圖片庫不全,有的表情無法展示到頁面上,這個就需要定期維護

推薦一個比較好用的插件庫 https://github.com/node-modules/emoji 

使用方法 先下載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('😎'));