关于前端处理表情符号问题（解决方案）

今天测试反馈一个问题，说是有表情符号的评论上传报错，很显然后台对于表情符号没有做相关的处理，让他们处理，他们说怎样怎样麻烦，算了，还是前端自己处理吧！

具体原因是：UTF-8编码有可能是两个、三个、四个字节。Emoji表情是4个字节，而Mysql的utf8编码最多3个字节，所以数据插不进去。

方案：

可以先把表情符号转化为字符串，用字符串上传到服务器，显示时把字符串转化为表情符。
前端阻止用户输入表情符，体验不太好。

方案一.
表情符转为字符:

function EmojiExchangeString(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; 
}

字符转为表情符:

function StringExchangeEmoji(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;
}

方案二.

 <textarea v-bind:maxlength="Surplus" @input="descArea" v-model="inputText" name="abstract" id="abstract" placeholder="宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧！"></textarea>

//方法
descArea () {
   var regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
      this.inputText  = this.inputText.replace(regStr,"")
}

关于前端处理表情符号问题（解决方案）

猜你喜欢