VUE + H5前端文本框输入和展示 表情解决方案-----编码格式转换

第一种：在存取时进行编码：（我本次使用的方式）

存储时编码：emoji_encode

/**对表情转义**/
function emojiEncode(e){
    var n = /[\ud800-\udbff][\udc00-\udfff]/g;
    // 检测utf16字符正则
    return e = e.replace(n, function (e) {
        var n, r;
        return 2 === e.length ? (n = e.charCodeAt(0), r = e.charCodeAt(1),
        "&#" + (1024 * (n - 55296) + 65536 + r - 56320) + ";") : e
    })
}

取数据时解码：

/**对表情解码**/
function emojiDecode(e){
    var n = /\&#.*?;/g;//获取数据库种16进制的数据
       //然后进行解码操作
    return e.replace(n, function (e) {
        var n, r, t;
        return 9 == e.length ? (t = parseInt(e.match(/[0-9]+/g)), n = Math.floor((t - 65536) / 1024) + 55296, r = (t - 65536) % 1024 + 56320, unescape("%u" + n.toString(16) + "%u" + r.toString(16))) : e
    })
}

上边两个方法我们是把他们放在了公共js种，可以直接调用，如我们项目中的调用存储编码方法的方式：

初始化时获取数据使解码后的数据回显：

最后回显后的效果如下图：

第二种：在前端编码解决（本方案输入框可以输入存储，但是读取后无法再放入输入框编辑，直接展示没有问题：

    在input输入框里面添加上键盘自带表情符后，发送给后台服务器会显示服务异常，网上有给出解决方法，表情编码是16进制的，而我们用的是8进制的所以保存才会报错。将表情符转码成就能够ok：

  解决存储问题的方法（即就是把16进制的表情编码转换成文字编码）：

/**表情符号存储与编译**/

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;

                // 转换算法

                var ss = "&#" + code + ";";

                return ss;

            } else {

                return char;

            }

        });        

        str = str.replace(/&#/g,'^^');

        return str;

    }

解决回显的问题（即把库里的表情数据解码为16进制便于回显）：

/**表情解码**/
function entitiestoUtf16(str){

        // 检测出形如〹形式的字符串

        var strObj=utf16toEntities(str);

        strObj = strObj.replace(/\^\^/g,'&#');

        var patt = /&#\d+;/g;

        var H,L,code;

        var arr = strObj.match(patt)||[];

        for (var i=0;i<arr.length;i++){

            code = arr[i];

            code=code.replace('&#','').replace(';','');

            // 高位

            H = Math.floor((code-0x10000) / 0x400)+0xD800;

            // 低位

            L = (code - 0x10000) % 0x400 + 0xDC00;

            code = "&#"+code+";";

            var s = String.fromCharCode(H,L);

            strObj.replace(code,s);

        }

        return strObj;

    }