js实现微信表情回显

最新推荐文章于 2024-04-24 16:04:42 发布
最新推荐文章于 2024-04-24 16:04:42 发布
阅读量994 收藏 1
点赞数 1
分类专栏： qqFace 微信 js 文章标签： js javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/farme_guan/article/details/105245476
版权
js 同时被 3 个专栏收录
11 篇文章 0 订阅
订阅专栏
qqFace
2 篇文章 0 订阅
订阅专栏
微信
2 篇文章 0 订阅
订阅专栏

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

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;
}

 

 

黑匣子~
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单调用：直接在网页上显示微信emoji表情的CSS
03-15
把微信中获取的表情标签如：，直接输出到HTML中，再引入本CSS文件即可识别显示。
105个微信qq默认表情图片打包附带对照表和js正则替换示例和php代码
07-24
包含105个微信qq默认图片表情包,附带表情字符对照表,同时提供了使用js正则替换的示例代码,以及php组装成数组的代码.很全很实用.
JS 微信emoji表情数组
weixin_36977678的博客
08-04 2200
表情包在下载资源 var emoji = [{ alt: '[微笑]', src: 'emoji/1.png', title: "/::)" }, { alt: '[撇嘴]', src: 'emoji/2.png', title: "/::~" }, { alt: '[色]', src: 'emoji/3.png', title: "/::B" }, { alt: '[发呆]', src: 'emoji/4.png', title: "/::|" }, { alt: '[得意
微信表情js代码
weixin_30920091的博客
10-27 1151
var list = [], face_list = { "[微笑]": 1, "[撇嘴]": 2, "[色]": 3, "[发呆]": 4, "[得意]": 5, "[流泪]": 6, ...
js 制作qq、微信 的表情
最新发布
pig_ning的博客
04-24 524
js 制作qq、微信 的表情
js实现微信表情发送
farme_guan的博客
04-01 3796
前景：之前有个项目是做的多个公众号管理平台，由于客户那边有多个公众号，用微信开放平台去管理太繁琐，数据也不能进行统一分析，在开发过程中，需要将微信开放平台功能--消息回复移接本系统，消息回复时涉及到表情+文字+超链接发送，实现需要两步整体操作，表情发送+表情回显 图片汉化四表情发送： 如下图为微信微信表情图 showFace方法默认执行，.faceNav用于插入表情展示的div，表情展...
微信表情插件 jquery
01-13
用于微信自定义回复中添加表情使用。使用jquery来实现。
js实现form表单自动回显功能
04-13
js实现form表单自动回显功能
js实现图片上传到服务器和回显
10-15
在JavaScript中实现图片上传到服务器并进行回显是一项常见的任务，尤其在Web开发中。这里我们将深入探讨如何通过JS来实现这一功能。 首先，我们创建一个HTML结构，包含一个类名为`file-box`的`div`，内部有一个`...
微信小程序实现点击页面出现文字
01-18
本文实例为大家分享了微信小程序实现点击页面地方出现文字的具体代码，供大家参考，具体内容如下 效果图如下所示 .wxml {{text_a}} <text class=text style=left: {{text_bx}}px;top: {{text_by}}p
web 微信emoji显示
03-06
微信开发 web端 emoji标签显示 实现web端emoji表情显示
emoji表情js处理后显示demo
01-02
使用js处理emoji表情符号,处理后显示在页面上的一个demo，已调试完毕，可以直接使用
微信表情包的简单实现
07-30
微信表情包的简单实现，表情包的实现原理很简单，通过数据绑即可实现。通过此例，就可以清晰明了知道实现原理。希望对你有帮助。。
qq微信默认emoji表情图片打包附带对照表和js正则替换示例php代码
12-21
qq微信默认emoji表情图片打包附带对照表和js正则替换示例php代码
JS点赞动画
01-04
点赞动画效果，就是用js写的，简单易懂。希望你们都去下载
Vue.js仿微信聊天窗口展示组件功能
12-09
运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build ... 支持文本和图片的展示（后续将支持对语音类的展示）...
js 转企业微信表情
qq_38935512的博客
12-27 557
思路：根据固定的微信表情对照表和精灵图 使用背景图片的方式显示 两者间有一定的规律。// 微信表情对照表。
js 弹出表情
01-21
简单、实用的QQ弹出表情 简单、实用的QQ弹出表情
微信小程序获取用户昵称中含有emoj表情，后端处理方式以及回显。
changingshow的专栏
08-05 2447
1、在做微信小程序的时候遇到了用户昵称中含有emoj表情无法入库的情况。 ### Cause: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x80' for column 'nick' at row 1 ; uncategorized SQLException for SQL []; SQL state [HY000...
微信公众号自定义菜单回显 遍历
08-18
具体的回显和遍历操作可以通过以下步骤实现： 1. 使用微信公众平台提供的接口获取当前菜单配置信息。可以通过调用接口 `https://api.weixin.qq.com/cgi-bin/menu/get?access_token=ACCESS_TOKEN` 来获取菜单信息，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值