Emoji（表情符号）的使用到处都有，想通过js为自己的网页添加Emoji吗？今天就为大家整理在Github上最受欢迎的Emoji开源库，让自己的页面显示Emoji。

twemoji 

通过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/

github地址：http://twitter.github.io/twemoji，是目前应用最广泛的，很多其它的开源方案都是基于它来实现的。

项目主页  https://twemoji.maxcdn.com/

emojify 

同样是js模块，但是表情包使用的是一整张大的sheet，而不是分别请求单个表情。一整张真的很大啊！有多个不同版本表情包可以切换

github地址： http://hassankhan.github.io/emojify.js/

Emoji Cheat Sheet 

Emoji Cheat Sheet 是绘文字短代码小抄列表。Github上支持Emoji表情符号，短码，而不是特殊字符。使用方法为前后冒号包围表情代号的句法。 

:blush:

github地址：https://github.com/twitter/twemoji

react-emoji  

用于React框架的npm moudle，有两个版本的表情包。我在尝试使用的时候发现了以下问题：需要通过Class的mixins属性来使用这个模块，而在ES6的class写法中是不支持mixins。

github地址：https://github.com/banyan/react-emoji

react-emojify 

MIT出品。这是一个支持React ES6的npm moudle。感觉这个还不错，以后可以更深入的了解和试用一下

github地址：https://github.com/pladaria/react-emojione 

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/422