js实现微信表情回显

上文介绍了微信表情的发送，这篇文章介绍下微信表情回显时的方法，相对于表情发送的功能，回显这块显得简单多了我们还是用原有的数组来处理，后端返回的格式例如：哈哈[左哼哼] 这样类型，我们只需将[左哼哼]解析成对用的数字就行，然后将数字用微信一样的方法展示出来就行

qqfaceArr = [['[微笑]','0'], ['[撇嘴]','1'],['[色]','2'],['[发呆]','3'],['[得意]','4'],['[流泪]','5'],['[害羞]','6' ],['[闭嘴]','7'],['[睡]','8'],['[大哭]','9'],['[尴尬]','10'],['[发怒]','11'],['[调皮]','12'],['[呲牙]','13'], ['[惊讶]','14'], ['[难过]','15'],
['[酷]','16'], ['[囧]','17'], ['[抓狂]','18'], ['[吐]','19'], ['[偷笑]','20'], ['[愉快]','21'], ['[白眼]','22'], ['[傲慢]','23'], ['[饥饿]','24'], ['[困]','25'], ['[惊恐]','26'], ['[流汗]','27'], ['[憨笑]','28'], ['[悠闲]','29'], ['[奋斗]','30'],
['[咒骂]','31'],['[疑问]','32'], ['[嘘]','33'], ['[晕]','34'], ['[疯了]','35'], ['[衰]','36'], ['[骷髅]','37'], ['[敲打]','38'], ['[再见]','39'], ['[擦汗]','40'], ['[抠鼻]','41'], ['[鼓掌]','42'], ['[糗大了]','43'], ['[坏笑]','44'], ['[左哼哼]','45'],
['[右哼哼]','46'], ['[哈欠]','47'], ['[鄙视]','48'], ['[委屈]','49'], ['[快哭了]','50'], ['[阴险]','51'], ['[亲亲]','52'], ['[吓]','53'], ['[可怜]','54'], ['[菜刀]','55'], ['[西瓜]','56'], ['[啤酒]','57'], ['[篮球]','58'], ['[乒乓]','59'], ['[咖啡]','60'],
['[饭]','61'], ['[猪头]','62'], ['[玫瑰]','63'], ['[凋谢]','64'], ['[嘴唇]','65'], ['[爱心]','66'], ['[心碎]','67'], ['[蛋糕]','68'], ['[闪电]','69'], ['[炸弹]','70'], ['[刀]','71'], ['[足球]','72'], ['[瓢虫]','73'], ['[便便]','74'], ['[月亮]','75'],
['[太阳]','76'], ['[礼物]','77'], ['[拥抱]','78'], ['[强]','79'], ['[弱]','80'], ['[握手]','81'], ['[胜利]','82'], ['[抱拳]','83'], ['[勾引]','84'], ['[拳头]','85'], ['[差劲]','86'], ['[爱你]','87'], ['[NO]','88'], ['[OK]','89'], ['[爱情]','90'],
['[飞吻]','91'], ['[跳跳]','92'], ['[发抖]','93'], ['[怄火]','94'], ['[转圈]','95'], ['[磕头]','96'], ['[回头]','97'], ['[跳绳]','98'], ['[投降]','99'], ['[激动]','100'], ['[乱舞]','101'], ['[献吻]','102'], ['[左太极]','103'], ['[右太极]','104']];

效果如下：

完整代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>处理前信息：<p id="message">是你呀观观[左哼哼]</p><br/>处理后信息：<p id="showMessage"></p><br/>展示信息：<div id="box" contenteditable="true" style="width: 300px;height: 200px;-webkit-user-select: auto"></div></body>
</html>
<script src="jquery-3.1.0.min.js"></script>
<script>var message1=message2=$('#message').html();var qqfaceArr = [['[微笑]','0'], ['[撇嘴]','1'],['[色]','2'],['[发呆]','3'],['[得意]','4'],['[流泪]','5'],['[害羞]','6' ],['[闭嘴]','7'],['[睡]','8'],['[大哭]','9'],['[尴尬]','10'],['[发怒]','11'],['[调皮]','12'],['[呲牙]','13'], ['[惊讶]','14'], ['[难过]','15'],
['[酷]','16'], ['[囧]','17'], ['[抓狂]','18'], ['[吐]','19'], ['[偷笑]','20'], ['[愉快]','21'], ['[白眼]','22'], ['[傲慢]','23'], ['[饥饿]','24'], ['[困]','25'], ['[惊恐]','26'], ['[流汗]','27'], ['[憨笑]','28'], ['[悠闲]','29'], ['[奋斗]','30'],
['[咒骂]','31'],['[疑问]','32'], ['[嘘]','33'], ['[晕]','34'], ['[疯了]','35'], ['[衰]','36'], ['[骷髅]','37'], ['[敲打]','38'], ['[再见]','39'], ['[擦汗]','40'], ['[抠鼻]','41'], ['[鼓掌]','42'], ['[糗大了]','43'], ['[坏笑]','44'], ['[左哼哼]','45'],
['[右哼哼]','46'], ['[哈欠]','47'], ['[鄙视]','48'], ['[委屈]','49'], ['[快哭了]','50'], ['[阴险]','51'], ['[亲亲]','52'], ['[吓]','53'], ['[可怜]','54'], ['[菜刀]','55'], ['[西瓜]','56'], ['[啤酒]','57'], ['[篮球]','58'], ['[乒乓]','59'], ['[咖啡]','60'],
['[饭]','61'], ['[猪头]','62'], ['[玫瑰]','63'], ['[凋谢]','64'], ['[嘴唇]','65'], ['[爱心]','66'], ['[心碎]','67'], ['[蛋糕]','68'], ['[闪电]','69'], ['[炸弹]','70'], ['[刀]','71'], ['[足球]','72'], ['[瓢虫]','73'], ['[便便]','74'], ['[月亮]','75'],
['[太阳]','76'], ['[礼物]','77'], ['[拥抱]','78'], ['[强]','79'], ['[弱]','80'], ['[握手]','81'], ['[胜利]','82'], ['[抱拳]','83'], ['[勾引]','84'], ['[拳头]','85'], ['[差劲]','86'], ['[爱你]','87'], ['[NO]','88'], ['[OK]','89'], ['[爱情]','90'],
['[飞吻]','91'], ['[跳跳]','92'], ['[发抖]','93'], ['[怄火]','94'], ['[转圈]','95'], ['[磕头]','96'], ['[回头]','97'], ['[跳绳]','98'], ['[投降]','99'], ['[激动]','100'], ['[乱舞]','101'], ['[献吻]','102'], ['[左太极]','103'], ['[右太极]','104']];qqfaceArr.forEach((item,index)=>{message1=message1.replace(item[0],item[1]);message2=message2.replace(item[0],`<img src='https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/smiley/smiley_${item[1]}4273fb.png' data-id='${item[1]}'/>`)});$('#showMessage').html(message1);$('#box').html(message2)</script>

.faceNav{width: 400px;height: 230px;border:1px solid #333;background-color: #fff;/*display: none;*/
}
.faceNav>.qqface{float: left;cursor: pointer;}
#box img{width: 20px;height: 20px;vertical-align: middle; /* display: inline-block; */background-size: 20px auto;
}
.qqface {width: 28px;height: 28px;font-size: 0;text-indent: -999em;background: url('bq.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: 0 0;
}.qqface.qqface1 {background-position: -29px 0;
}.qqface.qqface2 {background-position: -58px 0;
}.qqface.qqface3 {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;
}.qqface.qqface26 {background-position: -319px -29px;
}.qqface.qqface27 {background-position: -348px -29px;
}.qqface.qqface28 {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;
}.qqface.qqface51 {background-position: -174px -87px;
}.qqface.qqface52 {background-position: -203px -87px;
}.qqface.qqface53 {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;
}.qqface.qqface76 {background-position: -29px -145px;
}.qqface.qqface77 {background-position: -58px -145px;
}.qqface.qqface78 {background-position: -87px -145px;
}.qqface.qqface79 {background-position: -116px -145px;
}.qqface.qqface80 {background-position: -145px -145px;
}.qqface.qqface81 {background-position: -174px -145px;
}.qqface.qqface82 {background-position: -203px -145px;
}.qqface.qqface83 {background-position: -232px -145px;
}.qqface.qqface84 {background-position: -261px -145px;
}.qqface.qqface85 {background-position: -290px -145px;
}.qqface.qqface86 {background-position: -319px -145px;
}.qqface.qqface87 {background-position: -348px -145px;
}.qqface.qqface88 {background-position: -377px -145px;
}.qqface.qqface89 {background-position: -406px -145px;
}.qqface.qqface90 {background-position: 0 -174px;
}.qqface.qqface91 {background-position: -29px -174px;
}.qqface.qqface92 {background-position: -58px -174px;
}.qqface.qqface93 {background-position: -87px -174px;
}.qqface.qqface94 {background-position: -116px -174px;
}.qqface.qqface95 {background-position: -145px -174px;
}.qqface.qqface96 {background-position: -174px -174px;
}.qqface.qqface97 {background-position: -203px -174px;
}.qqface.qqface98 {background-position: -232px -174px;
}.qqface.qqface99 {background-position: -261px -174px;
}.qqface.qqface100 {background-position: -290px -174px;
}.qqface.qqface101 {background-position: -319px -174px;
}.qqface.qqface102 {background-position: -348px -174px;
}.qqface.qqface103 {background-position: -377px -174px;
}.qqface.qqface104 {background-position: -406px -174px;
}

js实现微信表情回显相关推荐

js实现微信表情发送
前景:之前有个项目是做的多个公众号管理平台,由于客户那边有多个公众号,用微信开放平台去管理太繁琐,数据也不能进行统一分析,在开发过程中,需要将微信开放平台功能--消息回复移接本系统,消息回复时涉及到表 ...
chosen.js插件使用，回显，动态添加选项
本文仅为简单使用示例详情见官网:https://harvesthq.github.io/chosen/ 实例化 $(".chosen-select").chosen({disab ...
js传入数字，回显倒计时
vue项目最近做考试项目用到倒计时的js,特地记录一下 data() {return {//倒计时hour: '',minute: '',second: '',timer: '',} }, compu ...
微信小程序开发——实现修改文章富文本（hf_editor）输入框回显文章功能
文章发布界面就是一个类型选择.标题输入(input).内容输入(hf_editor) 代码就不详细说明了当我们需要修改博客的时候一般的界面显示就是显示一个和发布类似的输入框,只是里面存有之前填写的 ...
js textarea换行分隔成数组和数组转换行符textarea回显
在web的前端操作中,有时候需要将 html 的 textarea 标签元素中的内容以每行的形式转成一个数组并发向后台,在编辑的时候,数组数据需要taxtarea换行显示.那么该如何做呢? 下面这篇博 ...
Java图片上传+回显技术
博主最近在项目中多次运用多ajaxfileupload上传图片技术,并带有图片回显功能,后台java也用到了自己封装得处理文件得方法,分享给大家,一起学习应用,我们不止会New 前言先说一下整体得流 ...
小程序 | 微信小程序多图上传（点击上传、可修改删除与放大回显）
微信小程序实现多图上传需求文章目录基本图片处理 index.js(选择上传.点击回显.修改删除) index.js(实现循环多图上传数据库) 公共组件utils utils/common.util ...
jQuey/js 省市县三级下拉框联动的回显（简单易懂）
JSP 代码 <tr><td>地址:</td><td><select id="province&q ...
百度编辑器回显js报错Uncaught SyntaxError: Invalid or unexpected token
这个错误是因为回显的内容里面包含了回车,导致js报错解决办法如下: $vo['content'] = strreplace(array("\r\n", "\r" ...

js实现微信表情回显

js实现微信表情回显相关推荐

最新文章

热门文章