关于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提供的 <span class='emoji emoji"+codema+"'></span>形式展示出来 图片。
2、web向app发送消息：
第一步：展示图片,因为app端只能接受html实体，就是服务器端要存‘问号’这种样子，我们先用jquery.emoji.js实现界面，通过toUnicode2（str）方法将#微笑#这种两个井号包裹的汉字转化成u+形式，在通过toUnicode（str）方法将u+形式转化成<span class='emoji emoji"+codema+"'></span>形式展示出来 图片。
第二步：是要发送给服务器端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提供的 <span class='emoji emoji"+codema+"'></span>形式展示出来 图片。
具体方法：
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); }
demo地址：
链接：https://pan.baidu.com/s/17gh0aTxNLuXfNJyCTbfMSg 密码：39w0
