关于emoji表情，支持在app端发送web端显示，web端发送给app端显示，web与wap端互相显示。...

要用到emoji.js和emoji.jquery.js两个插件配合实现三端互通。

1、app端发送的emoji表情----到服务器---服务器存储的是‘问号’，无法显示如图所示：

后台的同学也试验了网上的改变数据库字符集方法，但是还是不生效。

先说下主要思路：

web从服务器拿到带‘问号‘的内容，其实这些问号是 html实体 ，通过下面 html实体转化成u+16进制编码（utf-16）的方法 utf16toEntities（str），实现将html实体转化为 u+形式，在通过emoji.js提供的 形式展示出来 图片。

2、web向app发送消息：

第一步：展示图片,因为app端只能接受html实体，就是服务器端要存‘问号’这种样子，我们先用jquery.emoji.js实现界面，通过toUnicode2（str）方法将#微笑#这种两个井号包裹的汉字转化成u+形式，在通过toUnicode（str）方法将u+形式转化成形式展示出来 图片。

第二步：是要发送给服务器端html实体,通过emoji.js中有个jEmoji.EMOJI_MAP一个对象，这个对象里是所有能在web页显示的 emoji表情HTML实体 与 他对应的u+16进制编码（utf-16）的对应表。先执行getarrmap（）格式化这个对应关系表，在通过fanzhuan（str）方法，实现u+形式转化成html实体，发送给服务器端。

3、web给wap发送消息（其实就是web to web）

因为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){
                  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 "";
                          break;
                      case 'U+0031 U+20E3':
                          return "";
                          break;
                      case 'U+0032 U+20E3':
                          return "";
                          break;
                      case 'U+0033 U+20E3':
                          return "";
                          break;
                      case 'U+0034 U+20E3':
                          return "";
                          break;
                      case 'U+0035 U+20E3':
                          return "";
                          break;
                      case 'U+0036 U+20E3':
                          return "";
                          break;
                      case 'U+0037 U+20E3':
                          return "";
                          break;
                      case 'U+0038 U+20E3':
                          return "";
                          break;
                      case 'U+0039 U+20E3':
                          return "";
                          break;
                      case 'U+0023 U+20E3':
                          return "";
                          break;
                      default:
                          a=a.toLowerCase().substr(2);
                        return "";
                          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);
        }

 

demo地址：

链接：https://pan.baidu.com/s/17gh0aTxNLuXfNJyCTbfMSg 密码：39w0

转载于:https://www.cnblogs.com/gaidalou/p/9300735.html