H5前端输入和展示 表情 三种解决方案

前端表情输入展示需求，最终解决方案。

1.修改数据库编码格式

  a.修改my.ini [mysqld] character-set-server=utf8mb4 (没有就自己添加进去) 

  b. 在Connector/J的连接参数中，不要加characterEncoding参数。 不加这个参数时，默认值就时autodetect,或手动设置utf8mb4

  c.修改表结构和参数列的编码格式为 utf8mb4

  d.重启mysql服务搞定

2.在存取时编码（PHP）

//对emoji表情转义

    function emoji_encode($str){

        $strEncode = '';

        $length = mb_strlen($str,'utf-8');

        for ($i=0; $i < $length; $i++) {

            $_tmpStr = mb_substr($str,$i,1,'utf-8');

            if (strlen($_tmpStr) >= 4){

                $strEncode .= '[[EMOJI:'.rawurlencode($_tmpStr).']]';

            } else {

                $strEncode .= $_tmpStr;

            }

        }

        return $strEncode;

    }

    //对emoji表情转反义

    function emoji_decode($str){

        $strDecode = preg_replace_callback('|\[\[EMOJI:(.*?)\]\]|', function($matches){

            return rawurldecode($matches[1]);

        }, $str);

        return $strDecode;

    }

3.前端编码解决（本方案输入框可以输入存储，但是读取后无法再放入输入框编辑，直接展示没有问题。欢迎补充）

/**表情符号存储与编译**/

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;

                // 转换算法

                var ss = "&#" + code + ";";

                return ss;

            } else {

                return char;

            }

        });

        

        str = str.replace(/&#/g,'^^');

        return str;

    }

//表情解码

    function entitiestoUtf16(str){

        // 检测出形如〹形式的字符串

        var strObj=utf16toEntities(str);

        strObj = strObj.replace(/\^\^/g,'&#');

        var patt = /&#\d+;/g;

        var H,L,code;

        var arr = strObj.match(patt)||[];

        for (var i=0;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);

            strObj.replace(code,s);

        }

        return strObj;

    }