JS解析、反解析emoji表情做評論vue項目、弄懂emoji表情原理

回顧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渲染調用

<p v-html=""msg(數據)></p>

每個人窮盡一生，都是在極力整合自己自童年時期就形成的性格