關於emoji表情，支持在app端發送web端顯示，web端發送給app端顯示，web與wap端互相顯示。

時間 2019-11-11

標籤關於 emoji 表情支持 app 發送 web 顯示 wap 互相欄目 HTML 简体版

原文原文鏈接

要用到emoji.js和emoji.jquery.js兩個插件配合實現三端互通。html

一、app端發送的emoji表情----到服務器---服務器存儲的是‘問號’，沒法顯示如圖所示：jquery

後臺的同窗也試驗了網上的改變數據庫字符集方法，可是仍是不生效。web

先說下主要思路：算法

web從服務器拿到帶‘問號‘的內容，其實這些問號是 html實體，經過下面 html實體轉化成u+16進制編碼（utf-16）的方法 utf16toEntities（str），實現將html實體轉化爲 u+形式，在經過emoji.js提供的 形式展現出來圖片。數據庫

二、web向app發送消息：服務器

第一步：展現圖片,由於app端只能接受html實體，就是服務器端要存‘問號’這種樣子，咱們先用jquery.emoji.js實現界面，經過toUnicode2（str）方法將#微笑#這種兩個井號包裹的漢字轉化成u+形式，在經過toUnicode（str）方法將u+形式轉化成形式展現出來圖片。app

第二步：是要發送給服務器端html實體,經過emoji.js中有個jEmoji.EMOJI_MAP一個對象，這個對象裏是全部能在web頁顯示的 emoji表情HTML實體與他對應的u+16進制編碼（utf-16）的對應表。先執行getarrmap（）格式化這個對應關係表，在經過fanzhuan（str）方法，實現u+形式轉化成html實體，發送給服務器端。編碼

三、web給wap發送消息（其實就是web to web）spa

由於web端能選擇的emoji表情都是 jquery.emoji.js提供的界面中的表情，咱們講這些表情一一對應本身設計一個表，在選擇某個表情時，返回對應的u+編碼，在經過 emoji.js提供的 形式展現出來圖片。插件

具體方法：

hljs.initHighlightingOnLoad();
        $(".rob_c_textfn").emoji({
            button: ".rob_emojiandimg",
            showTab: false,
            animation: 'none',
            icons: [{
                path: "images/qq/",
                file: ".png",
                maxNum: 21,
                excludeNums: [],
                placeholder: "#{alias}#",
                alias: {
                    1: "微笑",
                    2: "大笑",
                    3: "笑哭",
                    4: "發呆",
                    5: "睡覺",
                    6: "尷尬",
                    7: "抓狂",
                    8: "天使",
                    9: "眨眼",
                    10: "可愛",
                    11: "吃",
                    12: "閉眼",
                    13: "喜歡",
                    14: "酷",
                    15: "得意",
                    16: "閉嘴",
                    17: "口罩",
                    18: "難過",
                    19: "囧",
                    20: "吃驚",
                    21: "撇嘴"
                }
            }]
        });
    
          var arremoji=[
              {'zcname':'微笑','emojicode':'1F604'},
              {'zcname':'大笑','emojicode':'1F601'},
              {'zcname':'笑哭','emojicode':'1F602'},
              {'zcname':'發呆','emojicode':'1F633'},
              {'zcname':'睡覺','emojicode':'1F634'},
              {'zcname':'尷尬','emojicode':'1F605'},
              {'zcname':'抓狂','emojicode':'1F606'},
              {'zcname':'天使','emojicode':'1F607'},
              {'zcname':'眨眼','emojicode':'1F609'},
              {'zcname':'可愛','emojicode':'263A'},
              {'zcname':'吃','emojicode':'1F60B'},
              {'zcname':'閉眼','emojicode':'1F60C'},
              {'zcname':'喜歡','emojicode':'1F60D'},
              {'zcname':'酷','emojicode':'1F60E'},
              {'zcname':'得意','emojicode':'1F60F'},
              {'zcname':'閉嘴','emojicode':'1F610'},
              {'zcname':'口罩','emojicode':'1F637'},
              {'zcname':'難過','emojicode':'1F612'},
              {'zcname':'囧','emojicode':'1F613'},
              {'zcname':'吃驚','emojicode':'1F632'},
              {'zcname':'撇嘴','emojicode':'1F615'}
          ];
          
          var arremoji_val=[];
        function getarrmap(){
            var objemoji=jEmoji.EMOJI_MAP;
            console.log(objemoji);
            for(var i in objemoji){
                var item_o = {};
                item_o[i] = objemoji[i];
                arremoji_val.push(item_o);
            }

        }
        getarrmap();
        
//         #文字#轉u+格式
        function toUnicode2(s){
              return s.replace(/(?:#{1}[\u4e00-\u9fa5]{1,3}#{1})/g,function(a){
              a=a.replace(/#/g,'');
              for(var i=0;i<arremoji.length;i++){
                  if(a==arremoji[i].zcname){
                      return 'u+'+arremoji[i].emojicode;
                  }
              }
          });
          };
          
//         u+格式轉span模式 (接受服務器傳來的u+unicode後轉碼成span圖片)
        var regUtospan=/(U\+0030\s{1}U\+20E3)|(U\+0031\s{1}U\+20E3)|(U\+0032\s{1}U\+20E3)|(U\+0033\s{1}U\+20E3)|(U\+0034\s{1}U\+20E3)|(U\+0035\s{1}U\+20E3)|(U\+0036\s{1}U\+20E3)|(U\+0037\s{1}U\+20E3)|(U\+0038\s{1}U\+20E3)|(U\+0039\s{1}U\+20E3)|(U\+0023\s{1}U\+20E3)|(u\+{1}[0-9a-fA-F]{4,6})/ig;
        function toUnicode(s){
              return s.replace(regUtospan,function(a){
                  switch (a){
                      case 'U+0030 U+20E3':
                          return "<span class='emoji emoji3020e3'></span>";
                          break;
                      case 'U+0031 U+20E3':
                          return "<span class='emoji emoji3120e3'></span>";
                          break;
                      case 'U+0032 U+20E3':
                          return "<span class='emoji emoji3220e3'></span>";
                          break;
                      case 'U+0033 U+20E3':
                          return "<span class='emoji emoji3320e3'></span>";
                          break;
                      case 'U+0034 U+20E3':
                          return "<span class='emoji emoji3420e3'></span>";
                          break;
                      case 'U+0035 U+20E3':
                          return "<span class='emoji emoji3520e3'></span>";
                          break;
                      case 'U+0036 U+20E3':
                          return "<span class='emoji emoji3620e3'></span>";
                          break;
                      case 'U+0037 U+20E3':
                          return "<span class='emoji emoji3720e3'></span>";
                          break;
                      case 'U+0038 U+20E3':
                          return "<span class='emoji emoji3820e3'></span>";
                          break;
                      case 'U+0039 U+20E3':
                          return "<span class='emoji emoji3920e3'></span>";
                          break;
                      case 'U+0023 U+20E3':
                          return "<span class='emoji emoji2320e3'></span>";
                          break;
                      default:
                          a=a.toLowerCase().substr(2);
                        return "<span class='emoji emoji"+a+"'></span>";
                          break;
                  }
              });
          } 
          
//        翻轉web--app
        var return_emojihtml;
        function fanzhuan(str){
            str=str.replace(regUtospan,function(a){
                switch (a){
                      case 'U+0030 U+20E3':
                          return "0⃣";
                          break;
                      case 'U+0031 U+20E3':
                          return "1⃣";
                          break;
                      case 'U+0032 U+20E3':
                          return "2⃣";
                          break;
                      case 'U+0033 U+20E3':
                          return "3⃣";
                          break;
                      case 'U+0034 U+20E3':
                          return "4⃣";
                          break;
                      case 'U+0035 U+20E3':
                          return "5⃣";
                          break;
                      case 'U+0036 U+20E3':
                          return "6⃣";
                          break;
                      case 'U+0037 U+20E3':
                          return "7⃣";
                          break;
                      case 'U+0038 U+20E3':
                          return "8⃣";
                          break;
                      case 'U+0039 U+20E3':
                          return "9⃣";
                          break;
                      case 'U+0023 U+20E3':
                          return "#⃣";
                          break;
                      default:
                        outerxunhuan:
                        for(var i of arremoji_val){
                            for(var j in i){
                                if(a.toLowerCase()==i[j][0].toLowerCase()){
                                    return_emojihtml=j;
                                    break outerxunhuan;
                                }
                            }
                        }
//                        console.log(return_emojihtml);
                        return return_emojihtml;
                        break;
                  }
                
            })
            return str;
        }
        
//          html實體轉化成u+
          function tento16(str){
            str=str.replace(/&#{1}[0-9]+;{1}/ig,function(a){
                a=a.replace(/^&#{1}/ig,'');
                a=a.replace(/;{1}$/ig,'');
                a=parseFloat(a);
                return 'u+'+ a.toString(16);
            });
            return str;
        }
          function utf16toEntities(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;
                }
            });
            str=tento16(str);
            return str;
        }
        
            
//        web->app
        var res_to_u,res_to_fwq;
        function webtoapp(str){
//            轉u+格式
            res_to_u=toUnicode2(str);
//            u+轉span 展現圖片
            res_img=toUnicode(res_to_u);
//            發送表情文字笑臉給服務器
            res_to_fwq=fanzhuan(res_to_u);
            console.log(res_to_fwq,res_img);
        }
//        app->web
        function apptoweb(str){
//            若是是app對web 將實體轉化成u+;
            res_to_u=utf16toEntities(str);
//            若是是web對web 轉u+格式
            res_to_u=toUnicode2(res_to_u);
//            轉span背景圖顯示
            res_img=toUnicode(res_to_u);
            console.log(res_to_u,res_img);
        }