最近在做一个IM聊天项目，这个项目中也涉及到了发送表情的需求，就正好去研究了一下正则表达式，现在就和大家分享一下一个简单的demo（若有更简便的方法，希望各位朋友能指点哈）
先看看效果图
1、自己新建一个用于表情匹配的的数组
//自定义表情匹配规则var chatFace = [{value:"[):]",src:"ee_1.png"},{value:"[:D]",src:"ee_2.png"},{value:"[:-o]",src:"ee_4.png"},{value:"[;)]",src:"ee_3.png"},{value:"[:p]",src:"ee_5.png"},{value:"[(H)]",src:"ee_6.png"},{value:"[:@]",src:"ee_7.png"},{value:"[:s]",src:"ee_8.png"},{value:"[:$]",src:"ee_9.png"},{value:"[:(]",src:"ee_10.png"},{value:"[:'(]",src:"ee_11.png"},{value:"[:|]",src:"ee_18.png"},{value:"[(a)]",src:"ee_13.png"},{value:"[8o|]",src:"ee_14.png"},{value:"[8-|]",src:"ee_15.png"},{value:"[+o(]",src:"ee_16.png"},{value:"[-o)]",src:"ee_12.png"},{value:"[|-)]",src:"ee_17.png"},{value:"[*-)]",src:"ee_19.png"},{value:"[:-#]",src:"ee_20.png"},{value:"[:-*]",src:"ee_22.png"},{value:"[^o)]",src:"ee_21.png"},{value:"[8-)]",src:"ee_23.png"},{value:"[(|)]",src:"ee_24.png"},{value:"[(u)]",src:"ee_25.png"},{value:"[(S)]",src:"ee_26.png"},{value:"[(*)]",src:"ee_27.png"},{value:"[(#)]",src:"ee_28.png"},{value:"[(R)]",src:"ee_29.png"},{value:"[({)]",src:"ee_30.png"},{value:"[(})]",src:"ee_31.png"},{value:"[(k)]",src:"ee_32.png"},{value:"[(F)]",src:"ee_33.png"},{value:"[(W)]",src:"ee_34.png"},{value:"[(D)]",src:"ee_35.png"}];
2、把chatFace数组中的内容转换成对象 目的：利用对象中的键对去匹配相应的值 ，栗子： “[(D)]”：“ee_35.png” ， chatFaceJson["[(D)]"] = “ee_35.png”，可能有些朋友会有疑问，为什么在第一步的时候不直接就定义一个对象呢？干嘛要先定义一个数组再去转换成对象啊。。。 哈哈 我这样写的目的是想用js循环这个数组中的图片路径，把表情直接渲染在DOM上面,而不用去html文件中写那些代码。
/* 把chatFace数组中的内容转换成对象 目的：利用对象中的键对去匹配相应的值栗子： "[(D)]"："ee_35.png" ， chatFaceJson["[(D)]"] = "ee_35.png"*/var chatFaceJson = {};for (var faceI = 0; faceI <= chatFace.length - 1; faceI++) {chatFaceJson[chatFace[faceI].value] = chatFace[faceI].src;}
转换后输出chatFaceJson 就是下面图片显示的那样的
在DOM中渲染的表情图如下
3、表情转换的核心步骤， 使用正则表达式去过滤聊天内容中的表情
function faceReg(content) {content = content.replace(/\[.{0,3}\S]/ig,function (word) {return '<img src="images/face/'+chatFaceJson[word.replace(/\s/,'')]+'">';});return content;}
4、上面那几步走完，现在就可以去使用了，使用方法如下：
var chatMsg = '你好啊 [):][:D][;)][:-o] 你在干嘛[:p]'; //假设的聊天的内容$('#demo').html(faceReg(chatMsg)); // 使用faceReg(chatMsg)去过滤内容的表情并且返回相应的表情图片
完整代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>web</title><link rel="stylesheet" type="text/css" href="css/style.css"><script src="js/jquery-3.3.1.min.js"></script></head><style>#demo{ line-height: 50px; font-size: 30px; background-color: #ccc; padding: 10px;border-radius: 10px; min-width: 100px; display: inline;}#demo img{ vertical-align: middle; width: 40px; height: 40px;}</style><body><div id="demo"></div><script>//自定义表情匹配规则var chatFace = [{value:"[):]",src:"ee_1.png"},{value:"[:D]",src:"ee_2.png"},{value:"[:-o]",src:"ee_4.png"},{value:"[;)]",src:"ee_3.png"},{value:"[:p]",src:"ee_5.png"},{value:"[(H)]",src:"ee_6.png"},{value:"[:@]",src:"ee_7.png"},{value:"[:s]",src:"ee_8.png"},{value:"[:$]",src:"ee_9.png"},{value:"[:(]",src:"ee_10.png"},{value:"[:'(]",src:"ee_11.png"},{value:"[:|]",src:"ee_18.png"},{value:"[(a)]",src:"ee_13.png"},{value:"[8o|]",src:"ee_14.png"},{value:"[8-|]",src:"ee_15.png"},{value:"[+o(]",src:"ee_16.png"},{value:"[-o)]",src:"ee_12.png"},{value:"[|-)]",src:"ee_17.png"},{value:"[*-)]",src:"ee_19.png"},{value:"[:-#]",src:"ee_20.png"},{value:"[:-*]",src:"ee_22.png"},{value:"[^o)]",src:"ee_21.png"},{value:"[8-)]",src:"ee_23.png"},{value:"[(|)]",src:"ee_24.png"},{value:"[(u)]",src:"ee_25.png"},{value:"[(S)]",src:"ee_26.png"},{value:"[(*)]",src:"ee_27.png"},{value:"[(#)]",src:"ee_28.png"},{value:"[(R)]",src:"ee_29.png"},{value:"[({)]",src:"ee_30.png"},{value:"[(})]",src:"ee_31.png"},{value:"[(k)]",src:"ee_32.png"},{value:"[(F)]",src:"ee_33.png"},{value:"[(W)]",src:"ee_34.png"},{value:"[(D)]",src:"ee_35.png"}];/* 把chatFace数组中的内容转换成对象 目的：利用对象中的键对去匹配相应的值栗子： "[(D)]"："ee_35.png" ， chatFaceJson["[(D)]"] = "ee_35.png"*/var chatFaceJson = {};for (var faceI = 0; faceI <= chatFace.length - 1; faceI++) {chatFaceJson[chatFace[faceI].value] = chatFace[faceI].src;}console.log(chatFaceJson);function faceReg(content) {content = content.replace(/\[.{0,3}\S]/ig,function (word) {return '<img src="images/face/'+chatFaceJson[word.replace(/\s/,'')]+'">';});return content;}var chatMsg = '你好啊 [):][:D][;)][:-o] 你在干嘛[:p]'; //假设的聊天的内容$('#demo').html(faceReg(chatMsg)); // 使用faceReg(chatMsg)去过滤内容的表情并且返回相应的表情图片</script></body></html>
