前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于前端处理表情符号问题(解决方案)

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

作者头像
honey缘木鱼
发布2019-01-28 14:29:28
1.8K0
发布2019-01-28 14:29:28
举报
文章被收录于专栏:娱乐心理测试

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

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

方案:

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

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

代码语言:javascript
复制
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; 
}

字符转为表情符:

代码语言:javascript
复制
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;
}

方案二.

代码语言:javascript
复制
 <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,"")
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.01.22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档