微信小程序、uniapp、H5——发送、显示emoji表情

小伙伴们,在开发中有没有遇到过发布帖子或者实时聊天需要发送到一些emoji表情的。
在这里插入图片描述
在这里插入图片描述

但是每当我们直接将emoji表情提交到后台的接口又会报错,因为字符串的格式不一致导致数据无法添加致数据库。
那么作为前端的我们就要将我们要提交的数据,通过如下方法正则获取所有的emoji表情,将其转成 base64 。

// 将emoji表情其转成 base64
utf16toEntities:function(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;
		}
	});
	return str;
},

这样我们就可以成功的将emoji表情提交到后台并加入数据库中了
那么怎么显示的时候是一串字符串呢?
那是因为你这里没有在转一下字符串类型导致现在显示出来的不是emoji表情,而是一串字符串
接着我们就要在显示前使用如下方法将该字段解码

// 解码emoji表情
uncodeUtf16:function(str){
	var reg = /\&#.*?;/g;
	var result = str.replace(reg, function (char) {
		var H, L, code;
		if (char.length == 9) {
			code = parseInt(char.match(/[0-9]+/g));
			H = Math.floor((code - 0x10000) / 0x400) + 0xD800;
			L = (code - 0x10000) % 0x400 + 0xDC00;
			return unescape("%u" + H.toString(16) + "%u" + L.toString(16));
		} else {
			return char;
		}
	});
	return result;
},

以上是小编的一个解决方案,如果小伙伴们还有什么好的方法请在下方评论,告知一下小编哦!

评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值