JS控制输⼊框输⼊表情emoji显⽰在页⾯上
问题描述：
最近做⼀个评论回复的功能遇到了⽤户输⼊框输⼊表情，存⼊数据库的时候转变成了问号
起初为了避免这个问题，做了⼀个过滤表情的控制
var inputText = $('#pinglun').val().trim().replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g,"");
后来经过⽹上查询资料，原来emoji⽤到的字符是4字节的utf-16（utf-16有2字节和4字节两种编码），⽽我们的数据库是采⽤的utf-8，并且最⼤只允许3字节的字符。这样冲突就产⽣了，表单因为这些emoji字符的存在⽆法正常提交。
解决⽅法：
⽅案⼀：
⼀是让后台处理，把这个utf-16字符做⼀些转换（也有⼀种⽅案是把数据库编码格式改成utf8mb4）。第⼆种办法就是在前端直接转换成实体字符后再提交。
处理函数：
/**
* ⽤于把⽤utf16编码的字符转换成实体字符，以供后台存储
* @param  {string} str 将要转换的字符串，其中含有utf16字符将被⾃动检出
html怎样设置文本框输入输出* @return {string}    转换后的字符串，utf16字符将被转换成&#xxxx；形式的实体字符
*/
function utf16toEntities(str) {
var patt=/[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则
str = place(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;
}
这样就能成功的把utf-16编码部分的emoji表情转换为了实体字符。
⽅案⼆：
另外还有⼀种⽅法是把表情转换成⾃⼰定义好的各种标识存⼊数据库，下次再从数据库取出的时候进⾏翻译
引⼊emoji表情库，⼀个gitHub上的插件
引⽤线上代码⽰例：
<link href="/emoji/0.2.2/emoji.css" rel="stylesheet" type="text/css"/>
<script src="/jquery/2.1.0/jquery.min.js"></script>
<script src="/emoji/0.2.2/emoji.js"></script>
var $text = $('.emojstext');
var html = $text.html().trim().replace(/\n/g, '<br/>');
$text.html(jEmoji.unifiedToHTML(html));

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。