前端如何處理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('😎'));複製代碼