前端处理手机键盘自带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图片了，主要逻辑在于高位跟地位的计算。

亲测有效