700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > VUE + H5前端文本框输入和展示 表情解决方案-----编码格式转换

VUE + H5前端文本框输入和展示 表情解决方案-----编码格式转换

时间:2024-02-22 17:56:32

相关推荐

VUE + H5前端文本框输入和展示 表情解决方案-----编码格式转换

第一种:在存取时进行编码:(我本次使用的方式)

存储时编码:emoji_encode

/**对表情转义**/function emojiEncode(e){var n = /[\ud800-\udbff][\udc00-\udfff]/g;// 检测utf16字符正则return e = e.replace(n, function (e) {var n, r;return 2 === e.length ? (n = e.charCodeAt(0), r = e.charCodeAt(1),"&#" + (1024 * (n - 55296) + 65536 + r - 56320) + ";") : e})}

取数据时解码:

/**对表情解码**/function emojiDecode(e){var n = /\&#.*?;/g;//获取数据库种16进制的数据//然后进行解码操作return e.replace(n, function (e) {var n, r, t;return 9 == e.length ? (t = parseInt(e.match(/[0-9]+/g)), n = Math.floor((t - 65536) / 1024) + 55296, r = (t - 65536) % 1024 + 56320, unescape("%u" + n.toString(16) + "%u" + r.toString(16))) : e})}

上边两个方法我们是把他们放在了公共js种,可以直接调用,如我们项目中的调用存储编码方法的方式:

初始化时获取数据使解码后的数据回显:

最后回显后的效果如下图:

第二种:在前端编码解决(本方案输入框可以输入存储,但是读取后无法再放入输入框编辑,直接展示没有问题:

在input输入框里面添加上键盘自带表情符后,发送给后台服务器会显示服务异常,网上有给出解决方法,表情编码是16进制的,而我们用的是8进制的所以保存才会报错。将表情符转码成就能够ok:

解决存储问题的方法(即就是把16进制的表情编码转换成文字编码):

/**表情符号存储与编译**/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;// 转换算法var ss = "&#" + code + ";";return ss;} else {return char;}});str = str.replace(/&#/g,'^^');return str;}

解决回显的问题(即把库里的表情数据解码为16进制便于回显):

/**表情解码**/function entitiestoUtf16(str){// 检测出形如&#12345;形式的字符串var strObj=utf16toEntities(str);strObj = strObj.replace(/\^\^/g,'&#');var patt = /&#\d+;/g;var H,L,code;var arr = strObj.match(patt)||[];for (var i=0;i<arr.length;i++){code = arr[i];code=code.replace('&#','').replace(';','');// 高位H = Math.floor((code-0x10000) / 0x400)+0xD800;// 低位L = (code - 0x10000) % 0x400 + 0xDC00;code = "&#"+code+";";var s = String.fromCharCode(H,L);strObj.replace(code,s);}return strObj;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。