要用到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