向后台传输表情时,手机自带输入法emoji表情的输入,提交及显示——前端解决方案

//表情
    utf16toEntities(str) { //检测utf16emoji表情 转换为实体字符以供后台存储
      var patt=/[\ud800-\udbff][\udc00-\udfff]/g;
      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表情应该就可以提交到数据库了,but...解决问题往往不会这么一帆风顺,我们发现正常保存的emoji表情在页面上不能正常显示,我们前端采用vue开发,用{{}}将包含emoji字符实体的字符串渲染到页面上时显示的直接是这样的字符实体,审查元素发现HTML内容是这样,一时还不知道原因是什么,但一定是用{{}}渲染有问题,尝试换用v-html.

 

 

转自:https://www.cnblogs.com/kaidarwang/p/7458431.html

posted @ 2020-08-14 17:16  张小中  阅读(1064)  评论(0编辑  收藏  举报