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字符将被自动检出
 * @return {string}     转换后的字符串，utf16字符将被转换成&#xxxx;形式的实体字符
 */
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; // 转换算法
                return "&#" + code + ";";
            } else {
                return char;
            }
        });
    return str;
}  

这样就能成功的把utf-16编码部分的emoji表情转换为了实体字符。

转换方法参考地址：http://blog.csdn.net/binjly/article/details/47321043

方案二：

另外还有一种方法是把表情转换成自己定义好的各种标识存入数据库，下次再从数据库取出的时候进行翻译

引入emoji表情库，一个gitHub上的插件

https://github.com/node-modules/emoji

引用线上代码示例：

<link href="http://cdn.staticfile.org/emoji/0.2.2/emoji.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.staticfile.org/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/emoji/0.2.2/emoji.js"></script>
var $text = $('.emojstext');
var html = $text.html().trim().replace(/\n/g, '<br/>');
$text.html(jEmoji.unifiedToHTML(html));