最近在做仿聊天表情发送功能，所以需要展⽰常⽤的105个表情。
因为对接的时候，⽤户聊天过程中发送的表情，服务器会转成对应的代码传给我们的服务器，类似如下：:/::)/::~/::B/::|/:8-)/::</::$/::X/::Z/::'(/::-|/::@/::P/::D/::O/::(/::+[囧]/::Q/::T/:,@P/:,@-D/::d/:,@o/::g/:|-)/::!/::L/::>/::,@/:,@f/::-S/:?/:,@x/:,
@@/::8/:,@!/:/:xx/:bye/:wipe/:dig/:handclap/:&-(/:B-)/:<@/:@>/::-O/:>-|/:P-(/::'|/:X-)/::*/:@x/:8*/:pd/:<W>/:beer/:basketb/:oo/:coffee/:eat
/:pig/:rose/:fade/:showlove/:heart/:break/:cake/:li/:bome/:kn/:footb/:ladybug/:shit/:moon/:sun/:gift/:hug/:strong/:weak/:share/:v/:@)/:jj/:@@
/:bad/:lvu/:no/:ok/:love/:<L>/:jump/:shake/:<O>/:circle/:kotow/:turn/:skip/:&>/:#-0/:hiphot/:kiss/:<&/:oY
所以我们需要转换成对应的表情⽂本
[:1:][:2:][:3:][:4:][:52:][:5:][:6:][:7:][:8:][:9:][:10:][:11:][:12:][:13:][:14:][:15:][:53:][:16:][:17:][:18:][:19:][:20:][:21:][:22:][:23:][:24:][:25:]
[:26:][:27:][:28:][:29:][:30:][:31:][:32:][:33:][:34:][:35:][:59:][:36:][:37:][:38:][:39:][:54:][:40:][:41:][:42:][:43:][:44:][:45:][:46:][:47:][:48:]
[:49:][:50:][:51:][:60:][:62:][:81:][:82:][:83:][:63:][:64:][:61:][:79:][:80:][:78:][:65:][:66:][:84:][:85:][:58:][:87:][:86:][:89:][:88:][:56:][:57:]
[:90:][:55:][:67:][:68:][:69:][:70:][:71:][:72:][:75:][:76:][:77:][:74:][:73:][:104:][:105:][:91:][:92:][:93:][:94:][:95:][:96:][:97:][:98:][:99:]
[:100:][:101:][:102:][:103:]
以上⽂本对应的中⽂含义如下：
[:1:][:2:][:3:][:4:][:52:][:5:][:6:][:7:][:8:][:9:][:10:][:11:][:12:][:13:][:14:]
[:15:][:53:][:16:][:17:][:18:][:19:][:20:][:21:][:22:][:23:][:24:][:25:][:26:][:27:][:28:]
[:29:][:30:][:31:][:32:][:33:][:34:][:35:][:59:][:36:][:37:][:38:][:39:][:54:][:40:][:41:]
[:42:][:43:][:44:][:45:][:46:][:47:][:48:][:49:][:50:][:51:][:60:][:62:][:81:][:82:][:83:]
[:63:][:64:][:61:][:79:][:80:][:78:][:65:][:66:][:84:][:85:][:58:][:87:][:86:][:89:][:88:]
[:56:][:57:][:90:][:55:][:67:][:68:][:69:][:70:][:71:][:72:][:75:][:76:][:77:][:74:][:73:]
[:104:][:105:][:91:][:92:][:93:][:94:][:95:][:96:][:97:][:98:][:99:][:100:][:101:][:102:][:103:]
[微笑][撇嘴][⾊][发呆][得意][流泪][害羞][闭嘴][睡][⼤哭][尴尬][发怒][调⽪][呲⽛][惊讶]
[难过][酷][囧][抓狂][吐][偷笑][愉快][⽩眼][傲慢][饥饿][困][惊恐][流汗][憨笑][悠闲]
[奋⽃][咒骂][疑问][嘘][晕][疯了][衰][骷髅][敲打][再见][擦汗][抠⿐][⿎掌][糗⼤了][坏笑]
[左哼哼][右哼哼][哈⽋][鄙视][委屈][快哭了][阴险][亲亲][吓][可怜][菜⼑][西⽠][啤酒][篮球][乒乓]
[咖啡][饭][猪头][玫瑰][凋谢][嘴唇][爱⼼][⼼碎][蛋糕][闪电][][⼑][⾜球][瓢⾍][便便]
[⽉亮][太阳][礼物][拥抱][强][弱][握⼿][胜利][抱拳][勾引][拳头][差劲][爱你][NO][OK]
[爱情][飞吻][跳跳][发抖][怄⽕][转圈][磕头][回头][跳绳][右太极][激动][乱舞][献吻][左太极][投降]
整理成js代码转换如下
.replace(/\[\:1\:\]/g, "[微笑]")
.replace(/\[\:2\:\]/g, "[撇嘴]")
.replace(/\[\:3\:\]/g, "[⾊]")
.replace(/\[\:4\:\]/g, "[发呆]")
.replace(/\[\:5\:\]/g, "[流泪]")
.replace(/\[\:6\:\]/g, "[害羞]")
.replace(/\[\:7\:\]/g, "[闭嘴]")
.replace(/\[\:8\:\]/g, "[睡]")
.replace(/\[\:9\:\]/g, "[⼤哭]")
.replace(/\[\:10\:\]/g, "[尴尬]")
.
replace(/\[\:11\:\]/g, "[发怒]")
.replace(/\[\:12\:\]/g, "[调⽪]")
.replace(/\[\:13\:\]/g, "[呲⽛]")
.replace(/\[\:14\:\]/g, "[惊讶]")
.replace(/\[\:15\:\]/g, "[难过]")
.replace(/\[\:16\:\]/g, "[囧]")
.replace(/\[\:17\:\]/g, "[抓狂]")
.replace(/\[\:18\:\]/g, "[吐]")
.replace(/\[\:19\:\]/g, "[偷笑]")
.replace(/\[\:20\:\]/g, "[愉快]")
.replace(/\[\:21\:\]/g, "[⽩眼]")
.
replace(/\[\:22\:\]/g, "[傲慢]")
.replace(/\[\:23\:\]/g, "[饥饿]")
.replace(/\[\:24\:\]/g, "[困]")
.replace(/\[\:25\:\]/g, "[惊恐]")
.replace(/\[\:26\:\]/g, "[流汗]")
.replace(/\[\:27\:\]/g, "[憨笑]")
.replace(/\[\:28\:\]/g, "[悠闲]")
.replace(/\[\:29\:\]/g, "[奋⽃]")
.replace(/\[\:30\:\]/g, "[咒骂]")
.replace(/\[\:31\:\]/g, "[疑问]")
.replace(/\[\:32\:\]/g, "[嘘]")
.
replace(/\[\:33\:\]/g, "[晕]")
.replace(/\[\:34\:\]/g, "[疯了]")
.replace(/\[\:35\:\]/g, "[衰]")
.replace(/\[\:36\:\]/g, "[敲打]")
.replace(/\[\:37\:\]/g, "[再见]")
.replace(/\[\:38\:\]/g, "[擦汗]")
.replace(/\[\:39\:\]/g, "[抠⿐]")
.replace(/\[\:40\:\]/g, "[糗⼤了]")
.replace(/\[\:41\:\]/g, "[坏笑]")
.replace(/\[\:42\:\]/g, "[左哼哼]")
.replace(/\[\:43\:\]/g, "[右哼哼]")
.
replace(/\[\:44\:\]/g, "[哈⽋]")
.replace(/\[\:45\:\]/g, "[鄙视]")
.replace(/\[\:46\:\]/g, "[委屈]")
.replace(/\[\:47\:\]/g, "[快哭了]")
.replace(/\[\:54\:\]/g, "[⿎掌]")
.replace(/\[\:55\:\]/g, "[拥抱]")
.replace(/\[\:56\:\]/g, "[⽉亮]")
.replace(/\[\:57\:\]/g, "[太阳]")
.replace(/\[\:58\:\]/g, "[]")
.replace(/\[\:59\:\]/g, "[骷髅]")
.replace(/\[\:60\:\]/g, "[菜⼑]")
.
replace(/\[\:61\:\]/g, "[猪头]")
.replace(/\[\:62\:\]/g, "[西⽠]")
.replace(/\[\:63\:\]/g, "[咖啡]")
.replace(/\[\:64\:\]/g, "[饭]")
.replace(/\[\:65\:\]/g, "[爱⼼]")
.replace(/\[\:66\:\]/g, "[⼼碎]")
.replace(/\[\:67\:\]/g, "[强]")
.replace(/\[\:68\:\]/g, "[弱]")
.replace(/\[\:69\:\]/g, "[握⼿]")
.replace(/\[\:70\:\]/g, "[胜利]")
.replace(/\[\:71\:\]/g, "[抱拳]")
.
replace(/\[\:72\:\]/g, "[勾引]")
.replace(/\[\:73\:\]/g, "[OK]")
朋友圈发表情.replace(/\[\:74\:\]/g, "[NO]")
.replace(/\[\:75\:\]/g, "[拳头]")
.replace(/\[\:76\:\]/g, "[差劲]")
.replace(/\[\:77\:\]/g, "[爱你]")
.replace(/\[\:78\:\]/g, "[嘴唇]")
.replace(/\[\:79\:\]/g, "[玫瑰]")
.replace(/\[\:80\:\]/g, "[凋谢]")
.replace(/\[\:81\:\]/g, "[啤酒]")
.replace(/\[\:82\:\]/g, "[篮球]")
.
replace(/\[\:83\:\]/g, "[乒乓]")
.replace(/\[\:84\:\]/g, "[蛋糕]")
.replace(/\[\:85\:\]/g, "[闪电]")
.replace(/\[\:86\:\]/g, "[⾜球]")
.replace(/\[\:87\:\]/g, "[⼑]")
.replace(/\[\:88\:\]/g, "[便便]")
.replace(/\[\:89\:\]/g, "[瓢⾍]")
.replace(/\[\:90\:\]/g, "[礼物]")
.replace(/\[\:91\:\]/g, "[跳跳]")
.replace(/\[\:92\:\]/g, "[发抖]")
.replace(/\[\:93\:\]/g, "[怄⽕]")
.
replace(/\[\:94\:\]/g, "[转圈]")
.replace(/\[\:95\:\]/g, "[磕头]")
.replace(/\[\:96\:\]/g, "[回头]")
.replace(/\[\:97\:\]/g, "[跳绳]")
.replace(/\[\:98\:\]/g, "[右太极]")
.replace(/\[\:99\:\]/g, "[激动]")
.replace(/\[\:100\:\]/g, "[乱舞]")
.replace(/\[\:101\:\]/g, "[献吻]")
.replace(/\[\:102\:\]/g, "[左太极]")
.replace(/\[\:103\:\]/g, "[投降]")
.replace(/\[\:104\:\]/g, "[爱情]")
.
replace(/\[\:105\:\]/g, "[飞吻]")
转换成功后需要展⽰出来啊，所以需要⼀张QQ表情图⽚，根据css取对应表情的位置，图⽚如下
对应的css代码如下：
.qqface {
width: 28px;
height: 28px;
font-size: 0;
text-indent: -999em;
background: url('../image/qqface.png') 0 0 no-repeat;
}
.qqface.small {
vertical-align: middle;
height: 24px !important;
width: 24px;
transform: scale(0.82);
margin-top: -5px;
margin-left: -3px;
}
.
qqface.qqface0 {
background-position: -87px 0;
}
.qqface.qqface4 {
background-position: -116px 0;
}
.qqface.qqface5 {
background-position: -145px 0;
}
.qqface.qqface6 {
background-position: -174px 0;
}
.qqface.qqface7 {
background-position: -203px 0;
}
.qqface.qqface8 {
background-position: -232px 0;
}
.qqface.qqface9 {
background-position: -261px 0;
}
.qqface.qqface10 {
background-position: -290px 0;
}
.qqface.qqface11 {
background-position: -319px 0;
}
.qqface.qqface12 {
background-position: -348px 0;
}
.qqface.qqface13 {
background-position: -377px 0;
}
.
qqface.qqface14 {
background-position: -406px 0;
}
.qqface.qqface15 {
background-position: 0 -29px;
}
.qqface.qqface16 {
background-position: -29px -29px; }
.qqface.qqface17 {
background-position: -58px -29px; }
.qqface.qqface18 {
background-position: -87px -29px; }
.qqface.qqface19 {
background-position: -116px -29px; }
.qqface.qqface20 {
background-position: -145px -29px; }
.qqface.qqface21 {
background-position: -174px -29px; }
.qqface.qqface22 {
background-position: -203px -29px; }
.qqface.qqface23 {
background-position: -232px -29px; }
.
qqface.qqface24 {
background-position: -261px -29px; }
.qqface.qqface25 {
background-position: -290px -29px;
background-position: -377px -29px; }
.qqface.qqface29 {
background-position: -406px -29px; }
.qqface.qqface30 {
background-position: 0 -58px;
}
.qqface.qqface31 {
background-position: -29px -58px; }
.qqface.qqface32 {
background-position: -58px -58px; }
.qqface.qqface33 {
background-position: -87px -58px; }
.qqface.qqface34 {
background-position: -116px -58px; }
.qqface.qqface35 {
background-position: -145px -58px; }
.qqface.qqface36 {
background-position: -174px -58px; }
.
qqface.qqface37 {
background-position: -203px -58px; }
.qqface.qqface38 {
background-position: -232px -58px; }
.qqface.qqface39 {
background-position: -261px -58px; }
.qqface.qqface40 {
background-position: -290px -58px; }
.qqface.qqface41 {
background-position: -319px -58px; }
.qqface.qqface42 {
background-position: -348px -58px; }
.qqface.qqface43 {
background-position: -377px -58px; }
.qqface.qqface44 {
background-position: -406px -58px; }
.qqface.qqface45 {
background-position: 0 -87px;
}
.qqface.qqface46 {
background-position: -29px -87px; }
.qqface.qqface47 {
background-position: -58px -87px; }
.qqface.qqface48 {
background-position: -87px -87px; }
.qqface.qqface49 {
background-position: -116px -87px; }
.qqface.qqface50 {
background-position: -145px -87px;
background-position: -232px -87px; }
.qqface.qqface54 {
background-position: -261px -87px; }
.qqface.qqface55 {
background-position: -290px -87px; }
.qqface.qqface56 {
background-position: -319px -87px; }
.qqface.qqface57 {
background-position: -348px -87px; }
.qqface.qqface58 {
background-position: -377px -87px; }
.qqface.qqface59 {
background-position: -406px -87px; }
.qqface.qqface60 {
background-position: 0 -116px;
}
.qqface.qqface61 {
background-position: -29px -116px; }
.qqface.qqface62 {
background-position: -58px -116px; }
.qqface.qqface63 {
background-position: -87px -116px; }
.qqface.qqface64 {
background-position: -116px -116px; }
.qqface.qqface65 {
background-position: -145px -116px; }
.
qqface.qqface66 {
background-position: -174px -116px; }
.qqface.qqface67 {
background-position: -203px -116px; }
.qqface.qqface68 {
background-position: -232px -116px; }
.qqface.qqface69 {
background-position: -261px -116px; }
.qqface.qqface70 {
background-position: -290px -116px; }
.qqface.qqface71 {
background-position: -319px -116px; }
.qqface.qqface72 {
background-position: -348px -116px; }
.qqface.qqface73 {
background-position: -377px -116px; }
.qqface.qqface74 {
background-position: -406px -116px; }
.qqface.qqface75 {
background-position: 0 -145px;
发布评论