emoji表情进行编码以适配移动端用户emoji表情的输入和展示
功能介绍:用户输入emoji表情,如输入法里的附带的表情,然后前端这里编码这些表情成特定格式的字符,传到后端。之后从接口拿到后直接html渲染即可。
问题所在:移动端用户输入emoji表情,如果未做编码就提交到后端的话,是不能成功提交的。需要先编码才行。
编码
/**
* 用于把用utf16编码的字符转换成实体字符,以供后台存储
* @param {string} str 将要转换的字符串,其中含有utf16字符将被自动检出
* @return {string} 转换后的字符串,utf16字符将被转换成&#xxxx;形式的实体字符
*/
function transEmoji(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;
}
拿到数据后渲染
正确渲染:直接以html形式渲染 <div v-html="content"></div>
错误方式:渲染不出来 <div>{{content}}</div>