H5頁面input輸入框含有鍵盤自帶的表情符時顯示異常

　　在做一個關於新聞的評論功能的H5頁面時，需求里面要求能夠發送表情顯示表情，如果使用自定義的表情庫，則在評論也還要加載大量的表情符圖片，極大的影響加載速度，消耗流量，去看了下別的新聞網頁版的評論部分也沒有使用外帶的表情庫。

　　在input輸入框里面添加上鍵盤自帶表情符后，發送給后台服務器會顯示服務異常，網上有給出解決方法，表情編碼是16進制的，而我們用的是8進制的於是報錯。將表情符轉碼成就能夠ok。代碼如下：

　　

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;
        }

　　

　這樣就解決了存儲問題。

  要想成功展示表情符還得轉回來。

 //表情解碼
        function entitiestoUtf16(str){
            // 檢測出形如〹形式的字符串
            var strObj=utf16toEntities(str);
            var patt = /&#\d+;/g;
            var H,L,code;
            var arr = strObj.match(patt)||[];
            for (var i=0;i<arr.length;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;
        } 

　這樣評論里就能顯示鍵盤自帶表情符啦。。

　希望能給需要的人幫助。如有錯誤之處，請指正~~~