前端處理手機鍵盤自帶emoji表情輸入評論后前端轉換成字符串傳入數據庫處理

前段時間開發一個項目發現，評論提交手機鍵盤自帶的emoji表情后，數據庫返回的相對表情部分的內容為空，后面查閱相關資料，參考以下博客地址（http://blog.csdn.net/binjly/article/details/47321043）

發現emoji用到的字符是4字節的utf-16（utf-16有2字節和4字節兩種編碼），而我們的數據庫是采用的utf-8，並且最大只允許3字節的字符

大體是這樣的（后端學習還不夠深入，后面理解透徹了會補上），然后導致寫入失敗，最后決定前端轉換編碼處理。

 

主要就是入庫前以及入庫后的處理

入庫前，將內容進行如下轉換：

最后入庫的將是類似'$#128522;'這種形式；

function utf16toEntities(str) {  
        var patt=/[\ud800-\udbff][\udc00-\udfff]/g; // 檢測utf16字符正則  
        str = str.replace(patt, function(char){  
                var H, L, code;  
                if (char.length===2) {  
                    H = char.charCodeAt(0); // 取出高位  
                    L = char.charCodeAt(1); // 取出低位  
                    code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 轉換算法  
                    return "&#" + code + ";";  
                } else {  
                    return char;  
                }  
            });  
        return str;  
} 

　　入庫后再進行如下處理：

 

/**
 *
 *
 *用於反解開EMOJI編碼后的字符串
 *
 *
 * */
function uncodeUtf16(str){
    var reg = /\&#.*?;/g;
    var result = str.replace(reg,function(char){
        var H,L,code;
        if(char.length == 9 ){
            code = parseInt(char.match(/[0-9]+/g));
            H = Math.floor((code-0x10000) / 0x400)+0xD800;
            L = (code - 0x10000) % 0x400 + 0xDC00;
            return unescape("%u"+H.toString(16)+"%u"+L.toString(16));
        }else{
            return char;
        }
    });
    return result;
}

　　這樣頁面顯示又是生動的emoji圖片了，主要邏輯在於高位跟地位的計算。

親測有效