Twitter 公开了开源的其完整的 Emoji 表情图片。开发者可以去GitHub下载完整的表情库，并把这些表情加入到自己的应用或网页中。
这几天的聊天项目中正好用到，记录下来方便使用。
调用方式
<script src="/js/twemoji.min.js"></script>
<script>
twemoji.parse(document.getElementById('emoji-list'), {size: 36});
</script>
HTML代码
<ul id="emoji-list">
<li title="笑脸">😁</li>
<li title="哭脸">😂</li>
<li title="表情1">😃</li>
<li title="表情2">😄</li>
<li title="表情3">😅</li>
<li title="表情4">😆</li>
<li title="表情5">😇</li>
<li title="表情6">😈</li>
<li title="表情7">😉</li>
<li title="表情8">😊</li>
<li title="表情9">😋</li>
<li title="表情10">😌</li>
</ul>
OK，就这两句代码即可调用。调用后在textarea如何显示，以及提交到页面的显示。由于emoji编码会转义成图片，而textarea不能保存图片，所以，这个时候在textarea中使用就不可以用emoji 的编码，而提交后却需要再次转换位编码，所以，这个过程存在一个替换的过程。所以我们给每个表情列表添加一个title属性。html代码中已呈现。接下来就是替换。
HTML代码
<div class="inputArea">
<form>
<textarea></textarea>
<button type="button" onClick="onMessageSend()">发送</button>
</form>
</div>
<div class="show"></div>
点击表情js代码
$('#emoji-list li').on('click',function(){
$(".inputArea textarea").focus(); //获取输入框焦点
$(".inputArea textarea").val($(".inputArea textarea").val() + '[' + $(this).attr("title") + ']');
});
发送代码
$(".inputArea textarea").ctrlEnter("button", function () {
//获取textarea中的值并替换回车空格
var chatMessage = $('.inputArea textarea').val().replace(/\n/g, '_@').replace(/\r/g, '_#');
chatMessage = chatMessage.replace(/_#_@/g, '<br/>');//IE7-8
chatMessage = chatMessage.replace(/_@/g, '<br/>');//IE9、FF、chrome
//替换，只写部分
chatMessage = chatMessage.replace(/\[哭脸\]/g, '😂');
chatMessage = chatMessage.replace(/\[笑脸\]/g, '😁');
chatMessage = chatMessage.replace(/\[表情1\]/g, '😂');
chatMessage = chatMessage.replace(/\[表情2\]/g, '😄');
chatMessage = chatMessage.replace(/\[表情3\]/g, '😅');
chatMessage = chatMessage.replace(/\[表情4\]/g, '😆');
twemoji.parse(document.getElementsByTagName('body')[0], {size: 36});
});
发送代码时具体的操作协议没有写出，这块主要是讲emoji表情的转码与文字的替换