document.getElementById('emojiWrapper').addEventListener('click', function(e) {
//获取被点击的表情
var target = e.target;
if (target.nodeName.toLowerCase() == 'img') {
var messageInput = document.getElementById('messageInput');
messageInput.focus();
messageInput.value = messageInput.value + '[emoji:' + target.title + ']';
};
}, false);
现在表情选中后，消息输入框中可以得到相应的代码了。
之后的发送也普通消息发送没区别，因为之前已经实现了文本消息的发送了，所以这里不用再实现什么，只是需要更改一下之前我们用来显示消息的代码，首先判断消息文本中是否含有表情符号，如果有，则转换为图片，最后再显示到页面。
为此我们写一个方法接收文本消息为参数，用正则搜索其中的表情符号，将其替换为img标签，最后返回处理好的文本消息。
将以下代码添加到HiChat类中。
www/scripts/hichat.js
_showEmoji: function(msg) {
var match, result = msg,
reg = /[emoji:d+]/g,
emojiIndex,
totalEmojiNum = document.getElementById('emojiWrapper').children.length;
while (match = reg.exec(msg)) {
emojiIndex = match[0].slice(7, -1);
if (emojiIndex > totalEmojiNum) {
result = result.replace(match[0], '[X]');
} else {
result = result.replace(match[0], '<img class="emoji" src="../content/emoji/'%20+%20emojiIndex%20+%20'.gif" />');
};
};
return result;
}
现在去修改之前我们显示消息的_displayNewMsg方法，让它在显示消息之前调用这个_showEmoji方法。
_displayNewMsg: function(user, msg, color) {
var container = document.getElementById('historyMsg'),
msgToDisplay = document.createElement('p'),
date = new Date().toTimeString().substr(0, 8),
//将消息中的表情转换为图片
msg = this._showEmoji(msg);
msgToDisplay.style.color = color || '#000';
msgToDisplay.innerHTML = user + '<span class="timespan">(' + date + '): </span>' + msg;
container.appendChild(msgToDisplay);
container.scrollTop = container.scrollHeight;
}下面是实现后的效果：
主要功能已经完成得差不多了，为了让程序更加人性与美观，可以加入一个修改文字颜色的功能，以及键盘快捷键操作的支持，这也是一般聊天程序都有的功能，回车即可以发送消息。
文字颜色
