• 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;
            } 
  • 相关阅读:
    Qt:绘制时,用线性渐变填充一个圆角矩形范围
    记录一个mysql数据迁移的坑
    idea中添加jar,maven有时候无法引入到jar
    img引入base64格式图片
    URL特殊符号转码_encodeURI/decodeURI
    [js] eval函数
    Modernizr
    判断对象上是否存在指定key
    Linux下格式化大于2T硬盘的方法
    win10 别人无法ping通本机设置
  • 原文地址:https://www.cnblogs.com/lisiyang/p/10444657.html
Copyright © 2020-2023  润新知