手机突然就显示不出emoj表情l表情了,以前能显示,现在格式化也不好使了

【转】移动前端手机输入法自带emoji表情字符处理
时间: 15:27:16
&&&& 阅读:1447
&&&& 评论:
&&&& 收藏:0
标签:http://blog.csdn.net/binjly/article/details/  
  今天,测试给我提了一个BUG,说移动端输入emoji表情无法提交。很早以前就有思考过,手机输入法里自带的emoji表情,应该是某些特殊字符。既然是字符,那应该都能提交才对,可是为啥会被卡住呢?搜了一下,才发现,原来emoji用到的字符是4字节的utf-16(utf-16有2字节和4字节两种编码),而我们的数据库是采用的utf-8,并且最大只允许3字节的字符。这样冲突就产生了,表单因为这些emoji字符的存在无法提交。
  找到原因之后,接下来就要考虑解决方案了。目前考虑到的两种方案,一是让后台处理,把这个utf-16字符做一些转换(这里不做讨论)。第二种办法就是在前端直接转换成实体字符后再提交。这样,后台不用做任何处理,用户的提交的信息也得以保留,是不是一个两全其美的办法呢?接下来我们要讨论的就是怎么把emoji表情字符转换成实体字符。
  首先,我们来看看手机输入法里自带的emoji字符是什么样。下面截了一张图,来自&http://computerism.ru/emoji-smiles.htm 。我们看到,每个emoji表情字符对应的实体字符编码都比较大,如第一行的笑脸,实体字符为😊 。而且,我们注意到,后面还有一个16进制的编码 D83DDE0A。那这个编码是干嘛用的?接着往下看。
一、字符检测
  要想把这些emoji表情字符转换成实体字符,那么就要先把它们检测出来。说到字符检测,我们的正则这时就该上场了。首先我们得确定这些字符的范围。前面我们已经知道,emoji表情字符用的是4字节的utf-16编码,而4字节的utf-16编码不被后台接受。所以,我们的检测范围就变成了把所有4字节的utf-16编码检测出来。我们通过搜索查到,4字节的utf-16编码范围为U+010000到U+10FFFF,那么,我们的正则是不是可以这么写:/[\u010000-\u10FFFF]/g ? NO,你会发现这个正则完全不能按我们预期工作。这是为什么呢?
  上面这个问题,一些童鞋可能已经知道答案了。没错,就是javascript的编码问题引起的。我们知道,javascript采用的是unicode编码,再准确一点说,是ucs-2编码。从名字上,我们就已经知道,这种编码方案是2字节的。在2字节的编码中找4字节的字符,很显然并没那么简单。所以,我们得考虑一下,这个utf-16在ucs-2编码中是如何表示的呢?这里,我搜到了我们可爱的传教士&&阮老师的一篇文章 《Unicode与JavaScript详解》(/blog/2014/12/unicode.html) 。 简单来说,就是把utf-16的4字节字符,拆分成两个ucs-2的2字节字符。具体算法可参考阮老师的上述文章,本文就不详细讨论了。从阮老师的文章中,我们已经知道了,4字节utf-16在js中被用两个字符来表示,高位范围为0xD800 - 0xDBFF,低位范围为0xDC00 - 0xDFFF。那么我们用于检测的正则表达式也就出来了:/[\uD800-\uDBFF][\uDC00-\uDFFF]/g&。现在再回过头看看我们第一张图的那串16进制,D83DDE0A、D83DDE03,是不是突然就明白了呢?
二、转换算法
  现在,我们已经能够检测出表单里的emoji表情字符。那么,重头戏来了,我们怎么把这个字符转换成实体字符呢?我们知道,实体字符是用来表示单个字符的编码,而我们的emoji表情,在js里,却是用两个字符来表示的。这可怎么办?等等,谁说emoji是两个字符,说好的4字节单字符呢?没错,一开始emoji就是用utf-16表示的啊&这里,我又参考了另一篇文章,/cn/sets/emoji/,以下截了一部分图以做说明。
  我们还是以那个笑脸的字符为例,其utf-16编码为U+1F600,我们转成十进制看看。
  128512不正好是我们的实体编码😀 吗?所以,现在问题又变成了怎么取得emoji表情字符utf-16编码的问题了。可是,可是,我们刚刚已经知道了,在js里,emoji表情也是用ucs-2编码的啊,只不过变成了用两个字符来表示。那么,我们的问题最终演变成了怎么从ucs-2编码转换成utf-16编码的问题。
  感谢阮老师,在阮老师的那篇文章中,有提到utf-16转ucs-2(unicode)的公式
[javascript]&&
H&=&Math.floor((c-0x10000)&/&0x400)+0xD800&
L&=&(c&-&0x10000)&%&0x400&+&0xDC00&
  可是,这个是utf-16转ucs-2,我们要的是ucs-2转utf-16啊?怎么办?推导回去呗。我们先看看这两个公式都做了什么。首先,高位的公式,把字符C减0x10000,再除0x400,取其商,再加0xD800。而低位则是字符C减0x1000,取除0x400的余,再加0xDC00。所以这个字符其实被分成了两部分:商和余,然后再把处理后的商做为高位,加上处理后的余做为低位,这样组合成了ucs-2字符。我们知道,被除数=除数&商+余数。那么,我们也可以反过来,求得C/0x400的商,再加上C/0x400的余,不就能算出C了吗。为了便于计算,我们用Q表示C的商,用M表示C的余,那么就有了以下公式:
[javascript]&&
H&=&Q&-&0x10000&/&0x400&+&0xD800&&
L&=&M&-&0x10000&%&0x400&+&0xDC00&&
C&=&Q&*&0x400&+&M&&
H&=&Q&-&0x10000&/&0x400&+&0xD800&&
L&=&M&+&0xDC00&&
C&=&Q&*&0x400&+&M&&
H&*&0x400&+&L&=&Q&*&0x400&-&0x10000&/&0x400&*&0x400&+&0xD800&*&0x400&+&M&+&0xDC00&&
H&*&0x400&+&L&=&C&-&0x10000&+&0xD800&*&0x400&+&0xDC00&&
C&=&(H&-&0xD800)&*&0x400&+&0x10000&+&L&-&0xDC00&&
&  公式出来之后,相信大家已经知道怎么做了,不过最后还是献一下丑,把我自己写的一个处理函数提供给大家参考:
[javascript]&&
function&utf16toEntities(str)&{&&
&&&&var&patt=/[\ud800-\udbff][\udc00-\udfff]/g;&
&&&&str&=&str.replace(patt,&function(char){&&
&&&&&&&&&&&&var&H,&L,&&&
&&&&&&&&&&&&if&(char.length===2)&{&&
&&&&&&&&&&&&&&&&H&=&char.charCodeAt(0);&
&&&&&&&&&&&&&&&&L&=&char.charCodeAt(1);&
&&&&&&&&&&&&&&&&code&=&(H&-&0xD800)&*&0x400&+&0x10000&+&L&-&0xDC00;&
&&&&&&&&&&&&&&&&return&"&#"&+&code&+&";";&&
&&&&&&&&&&&&}&else&{&&
&&&&&&&&&&&&&&&&return&&&
&&&&&&&&&&&&}&&
&&&&&&&&});&&
&&&&return&&&
&  运行结果如下:
  细心的童鞋,在刚刚看那些参考文章的时候,也许已经发现了,其实并不是所有的emoji表情字符都是utf-16编码的,也有一部分落在了ucs-2编码的范围(即只用了两个字节)。不过这都不是重点,重点是,我们已经成功的把utf-16编码部分的emoji表情转换为了实体字符。标签:
&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码!

我要回帖

更多关于 qqemoj表情包下载 的文章

 

随机推荐