[转]移动端emoji表情处理

发表于 |

在做一个关于新闻的评论功能的H5页面时，需求里面要求能够发送表情显示表情，如果使用自定义的表情库，则在评论也还要加载大量的表情符图片，极大的影响加载速度，消耗流量，去看了下别的新闻网页版的评论部分也没有使用外带的表情库。

在input输入框里面添加上键盘自带表情符后，发送给后台服务器会显示服务异常，网上有给出解决方法，表情编码是16进制的，而我们用的是8进制的于是报错。将表情符转码成就能够ok。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/**
 * 对emoji标签编码
 * @param str
 * @returns {void|XML|string|*}
 */
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;
}


这样就解决了存储问题,要想成功展示表情符还得转回来。
/**
 * 对emoji标签解码
 * @param str
 * @returns {void|XML|string|*}
 */
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;
}

如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues

前往LEE的github给他一个Start鼓励一下吧

原文出处：http://www.cnblogs.com/yaliu/p/5190625.html