JS解析、反解析emoji表情做评论vue项目、弄懂emoji表情原理

最新推荐文章于 2022-05-24 20:12:50 发布

LLsanmu

最新推荐文章于 2022-05-24 20:12:50 发布

阅读量3.2k

点赞数 2

分类专栏： Vue 文章标签： JS解析、反解析emoji表情做评论vue项目

Vue 专栏收录该内容

6 篇文章

订阅专栏

在Vue项目的评论功能中，为了支持发送emoji表情，需要理解emoji的utf16编码原理。由于JavaScript的Unicode字符集仅支持ucs-2编码，导致4字节的emoji字符无法正确显示和识别。因此，需要将emoji转换为utf16编码进行发送。在页面渲染时，通过全局函数实现反解析，确保表情正确显示。然而，过程中遇到了一些问题，需要不断调整和优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

回顾vue项目中h5评论的功能，需求是能发送emoji表情，上网查了查，整理了一下个人心得：
emoji表情转码大致原理是emoji使用的是utf16编码，这种编码方式会出现2个或者4个字节的字符，而javascript中都是2个字节的字符，造成这种情况的原因是javascript采用Unicode字符集只支持ucs-2这一种编码方式，这种方式的编码会把4字节的字符转换为2个双字节的字符，得不到正确结果，而且发送的字符后端也无法识别，因此需要进行编码转换，也就是转换成utf16编码再发送。

有个v-model=replayModelText的变量来存放input Value值转换编码发送到后台：

var patt=/[\ud800-\udbff][\udc00-\udfff]/g;
      // 检测utf16字符正则
      this.replayModelText = this.replayModelText.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;
          }
      });

页面渲染反解析这里在mian.js里，本来是要做个全局过滤后来发现出点问题（时间久远）改成了全局的函数

Vue.prototype.msg= function (val) {
    var patt = /&#\d+;/g;
    var H,L,code;
    var arr = val.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);
      val = val.replace(code,s);
    }
  return val;
};

html渲染调用