React.js + webpack + ES6 + Jquery
使用客户端的用户常常喜欢发emoji表情，而在浏览器打开网页版的时候，emoji表情不能正常显示。在chrome下，emoji表情显示的是黑白的线框表情。
因此需要通过前端来实现所有浏览器的emoji表情显示支持。
github上关于emoji的开源方案的尝试
Twitter的开源项目&&，是目前应用最广泛的，很多其它的开源方案都是基于它来实现的。
项目主页 &/
通过script标签加一个js文件就可以使用twemoji了。
twemoji.parse函数既可以处理文本（将文本中的emoji的code转变为相应的img标签），
也可以处理DOM（通过document.createDocumentFragment()将现有的DOM中的emoji code转变为img标签，再通过appenchild加载到页面上）。
问题：twemoji对DOM的操作不适合React框架，而且只能在window.onload之后执行；
& & & & &服务器是在国外，表情的图片加载的比较慢，js有放到cdn上的版本就会好一些。
最后我选用了twemoji的处理文本的方案。之后会考虑将js做些修改，把js和表情图片放到网站服务器上提高请求速度。
附加一篇简易的使用教程&https://blog.farrant.me/adding-emoji-support-to-any-website/
MIT的开源项目&
同样是js模块，但是表情包使用的是一整张大的sheet，而不是分别请求单个表情。一整张真的很大啊！
有多个不同版本表情包可以切换
具体使用我没有多做了解
react-emoji
/banyan/react-emoji &&/package/react-emoji
用于React框架的npm moudle
有两个版本的表情包
我在尝试使用的时候发现了以下问题：
需要通过Class的mixins属性来使用这个模块，而在ES6的class写法中是不支持mixins，因此放弃了这个方案
react-emojify
/pladaria/react-emojione &/package/react-emojify
这是一个支持React ES6的npm moudle
感觉这个还不错，以后可以更深入的了解和试用一下
更多类型的emoji开源项目
/showcases/emoji
还有一个程序员哥哥自己把twemoji应用到react的方案&https://blog.datawallet.io/emojis-in-react-d733d3ae120b#.mxsnegimp
react-easy-emoji &/appfigures/react-easy-emoji#readme 感觉也不错
阅读(...) 评论()随笔 - 71&
文章 - 7&评论 - 17&trackbacks - 0
　今天，测试给我提了一个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&&&
&　　运行结果如下：
utf16toEntities(unescape(%uD83D%udE0A));
　　细心的童鞋，在刚刚看那些参考文章的时候，也许已经发现了，其实并不是所有的emoji表情字符都是utf-16编码的，也有一部分落在了ucs-2编码的范围（即只用了两个字节）。不过这都不是重点，重点是，我们已经成功的把utf-16编码部分的emoji表情转换为了实体字符。
转：http://blog.csdn.net/binjly/article/details/
阅读(...) 评论()问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
支持emoji表情不需要前端做任何处理吗，我直接发送表情也可以识别，后台是怎么识别表情并转成unicode的？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不需要 这些都在 Unicode 表里面有的
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
emoji表情本来就是unicode中的字符，并不需要任何所谓的转换
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App