http://blog.csdn.net/binjly/article/details/47321043  

  今天,测试给我提了一个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详解》(http://www.ruanyifeng.com/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表示的啊 这里,我又参考了另一篇文章,http://unicode-table.com/cn/sets/emoji/,以下截了一部分图以做说明。

  我们还是以那个笑脸的字符为例,其utf-16编码为U+1F600,我们转成十进制看看。

  128512不正好是我们的实体编码😀 吗?所以,现在问题又变成了怎么取得emoji表情字符utf-16编码的问题了。可是,可是,我们刚刚已经知道了,在js里,emoji表情也是用ucs-2编码的啊,只不过变成了用两个字符来表示。那么,我们的问题最终演变成了怎么从ucs-2编码转换成utf-16编码的问题。

  感谢阮老师,在阮老师的那篇文章中,有提到utf-16转ucs-2(unicode)的公式

  1. H = Math.floor((c-0x10000) / 0x400)+0xD800 // 高位
  2. 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的余,那么就有了以下公式:

  1. H = Q - 0x10000 / 0x400 + 0xD800
  2. L = M - 0x10000 % 0x400 + 0xDC00
  3. C = Q * 0x400 + M
  4. // 因为0x10000 % 0x400 = 0,故推得:
  5. H = Q - 0x10000 / 0x400 + 0xD800
  6. L = M + 0xDC00
  7. C = Q * 0x400 + M
  8. // 根据C的公式,把H*0x400再加L,得到:
  9. H * 0x400 + L = Q * 0x400 - 0x10000 / 0x400 * 0x400 + 0xD800 * 0x400 + M + 0xDC00
  10. // 最后把Q * 0x400 + M换成C,得到:
  11. H * 0x400 + L = C - 0x10000 + 0xD800 * 0x400 + 0xDC00
  12. // 移项后,我们最终的公式为:
  13. C = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00

  公式出来之后,相信大家已经知道怎么做了,不过最后还是献一下丑,把我自己写的一个处理函数提供给大家参考:

  1. /**
  2. * 用于把用utf16编码的字符转换成实体字符,以供后台存储
  3. * @param  {string} str 将要转换的字符串,其中含有utf16字符将被自动检出
  4. * @return {string}     转换后的字符串,utf16字符将被转换成&#xxxx;形式的实体字符
  5. */
  6. function utf16toEntities(str) {
  7. var patt=/[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则
  8. str = str.replace(patt, function(char){
  9. var H, L, code;
  10. if (char.length===2) {
  11. H = char.charCodeAt(0); // 取出高位
  12. L = char.charCodeAt(1); // 取出低位
  13. code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 转换算法
  14. return "&#" + code + ";";
  15. } else {
  16. return char;
  17. }
  18. });
  19. return str;
  20. }

  运行结果如下:

  细心的童鞋,在刚刚看那些参考文章的时候,也许已经发现了,其实并不是所有的emoji表情字符都是utf-16编码的,也有一部分落在了ucs-2编码的范围(即只用了两个字节)。不过这都不是重点,重点是,我们已经成功的把utf-16编码部分的emoji表情转换为了实体字符。

【转】移动前端手机输入法自带emoji表情字符处理的更多相关文章

  1. 移动前端手机输入法自带emoji表情字符处理

    今天,测试给我提了一个BUG,说移动端输入emoji表情无法提交.很早以前就有思考过,手机输入法里自带的emoji表情,应该是某些特殊字符.既然是字符,那应该都能提交才对,可是为啥会被卡住呢?搜了一下 ...

  2. 【转】【异常处理】Incorrect string value: '\xF0\x90\x8D\x83...' for column... Emoji表情字符过滤的Java实现

    http://blog.csdn.net/shootyou/article/details/44852639 Emoji表情字符现在在APP已经广泛支持了.但是MySQL的UTF8编码对Emoji字符 ...

  3. mysql utf8mb4与emoji表情

    一 什么是Emoji emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji表情符号,在外国的手机短信里 ...

  4. 【Java】如何检测、替换4个字节的utf-8编码(此范围编码包含emoji表情)

    > 参考的优秀文章 1.十分钟搞清字符集和字符编码 2.Java中byte与16进制字符串的互相转换 3.[异常处理]Incorrect string value: '\xF0\x90\x8D\ ...

  5. IOS Emoji表情

    IOS Emoji 前言:我比较喜欢有趣的东西,有一些有趣的小东西,可能不是多么多么牛逼,也可能不需要多高深的技巧,也不会为其他什么强大的功能而服务,但是有时候将很多有趣的小东西组合起来运用,比如在你 ...

  6. emoji表情字符串 mysql 普通 utf8 格式无法存入

    处理方法: 1.在可以忽略emoji表情的情况下,可以选择将emoji表情字符过滤掉,这样不用动mysql 表结构    过滤Java代码参考如下: public static String filt ...

  7. 手机自带输入法emoji表情的输入,提交及显示——纯前端解决方案

    很早之前就遇到过需要前端支持用户输入并提交emoji表情的问题,一直没有尝试去解决,今天再一次狭路相逢,该来的躲不过,那就着手解决吧. 大多数emoji表情都是4字节的utf-16编码(辅助平面字符, ...

  8. Android之开启手机系统自带铃声

    /** * 开启手机系统自带铃声 */ private void startAlarm() { mMediaPlayer = MediaPlayer.create(this, getSystemDef ...

  9. paip.android 手机输入法制造大法

    paip.android 手机输入法制造大法 作者Attilax ,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/at ...

随机推荐

  1. ContentProvider域名替换小工具

    开发项目域名想怎么换就怎么换,就是这么任性! 这是一个很有意思的小工具! 这是一个方便开发人员和测试人员的小工具!! 吐槽: 一直在做Android开发,一直总有一个问题存在:做自己公司的apk开发时 ...

  2. 关于闭包(closure)的一些概念

    和其他大多数现代编程语言一样,JS也采用词法作用域,也就是说,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的.为了实现这种词法作用域,JS函数对象的内部状态不仅包含 ...

  3. Android AsyncTask 深度理解、简单封装、任务队列分析、自定义线程池

    前言:由于最近在做SDK的功能,需要设计线程池.看了很多资料不知道从何开始着手,突然发现了AsyncTask有对线程池的封装,so,就拿它开刀,本文将从AsyncTask的基本用法,到简单的封装,再到 ...

  4. window 和 linux 环境下杀死tomcat进程——也可以解决其他端口被占用的问题

    1.应用场景 在Windows或者linux操作系统中,我们在启动一个tomcat服务器时,经常会发现8080端口已经被占用的错误,而我们又不知道如何停止这个tomcat服务器. 2.window环境 ...

  5. 灵活运用SQL Server SSIS变量

    在SSIS开发ETL(Extract-Transform-Load),数据抽取.转换.装载的过程.我们需要自己定义变量 一.SSIS变量简介 SSIS(SQL Server Integration S ...

  6. 显示textarea内容的时候没有自动换行

    显示textarea内容的时候没有自动换行,网上找了好久,在一个论坛里找到解决方法: 1.把从数据库读出来的内容存放在一个Div内,例如: <div class="new-commen ...

  7. DEV全选多选小技巧

    var v1 = bindingSourceBase.DataSource as DataTable; foreach (DataRowView v in v1.DefaultView) { v[&q ...

  8. Masonry – 实现 Pinterest 模式的网格砌体布局

    Masonry 是一款 JavaScript 网格布局插件,可以实现类似 Pinterest 模式的砌体布局效果.通过把元素自动填充在垂直的空白区域,就像墙上堆砌的石头一样.这个库还可以作为 jQue ...

  9. 磁盘参数修订[转自vbird]

    某些时刻,你可能会希望修改一下目前文件系统的一些相关信息,举例来说,你可能要修改 Label name , 或者是 journal 的参数,或者是其他硬盘运行时的相关参数 (例如 DMA 启动与否-) ...

  10. spring注解方式在一个普通的java类里面注入dao

    spring注解方式在一个普通的java类里面注入dao @Repositorypublic class BaseDaoImpl implements BaseDao {这是我的dao如果在servi ...