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>

以上内容转至大佬博客，建议去看看原理： https://blog.csdn.net/binjly/article/details/47321043