JS解析、反解析emoji表情做评论vue项目、弄懂emoji表情原理
回顾vue项目中h5评论的功能,需求是能发送emoji表情,上网查了查,整理了一下个人心得emoji表情转码大致原理是emoji使用的是utf16编码,这种编码方式会出现2个或者4个字节的字符,而javascript中都是2个字节的字符,造成这种情况的原因是javascript采用Unicode字符集只支持ucs-2这一种编码方式,这种方式的编码会把4字节的字符转换为2个双字节的字符,得不到正确.
·
回顾vue项目中h5评论的功能,需求是能发送emoji表情,上网查了查,整理了一下个人心得:
emoji表情转码大致原理是emoji使用的是utf16编码,这种编码方式会出现2个或者4个字节的字符,而javascript中都是2个字节的字符,造成这种情况的原因是javascript采用Unicode字符集只支持ucs-2这一种编码方式,这种方式的编码会把4字节的字符转换为2个双字节的字符,得不到正确结果,而且发送的字符后端也无法识别,因此需要进行编码转换,也就是转换成utf16编码再发送。
有个v-model=replayModelText的变量来存放input Value值转换编码发送到后台:
var patt=/[\ud800-\udbff][\udc00-\udfff]/g;
// 检测utf16字符正则
this.replayModelText = this.replayModelText.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;
}
});
页面渲染反解析这里在mian.js里,本来是要做个全局过滤后来发现出点问题(时间久远)改成了全局的函数
Vue.prototype.msg= function (val) {
var patt = /&#\d+;/g;
var H,L,code;
var arr = val.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);
val = val.replace(code,s);
}
return val;
};
html渲染调用
<p v-html=""msg(数据)></p>
每个人穷尽一生,都是在极力整合自己自童年时期就形成的性格
更多推荐
已为社区贡献2条内容
所有评论(0)