使用正则表达式把IM聊天中的自定义表情格式转换成表情图片

最近在做一个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="data: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="data:images/face/'+chatFaceJson[word.replace(/\s/,'')]+'">';});return content;
}var chatMsg = '你好啊 [):][:D][;)][:-o] 你在干嘛[:p]';   //假设的聊天的内容$('#demo').html(faceReg(chatMsg));  // 使用faceReg(chatMsg)去过滤内容的表情并且返回相应的表情图片</script></body>
</html>

使用正则表达式把IM聊天中的自定义表情格式转换成表情图片相关推荐

vue 中常见的时间格式转换
项目中后台返回的时间有多种形式,时间戳.ISO标准时间格式等,我们需要转化展示成能看的懂得时间格式: 将2022-05-27T14:20:27.000000Z 时间格式转换成 2022-05-27 1 ...
ESRI的Shapefile文件向Google Earth中KML文件的格式转换
转载自http://wenku.baidu.com/link?url=3TG7c0cERbdnZwFBLq6n2v-chB-k4ja5ikNYSyRQHyLf4yvYCGBEGrlhch8GD5e-9 ...
python使用openCV加载图像、并将BGR格式转换成HSV格式、定义HSV格式中需要分离颜色的掩码(掩模)区间（mask）、并使用mask信息进行颜色分离、BGR格式的图像转化为RGB、并可视化
python使用openCV加载图像.并将BGR格式转换成HSV格式.定义HSV格式中需要分离颜色的掩码(掩模)区间(mask).并使用mask信息进行颜色分离.将BGR格式的图像转化为RGB.可视化 ...
java date 转integer_java 中Date的各种格式转换
把java.util.Date格式的时间转为java.sql.Date格式的时间 java.sql.Date sqldate = new java.sql.Date(date.getTime()); ...
中如何将方形图片转换成圆形图片_【PS】PS中不可不知的实用技巧！你都掌握了吗？...
今天给大家分享一些在PS中经常用到的实用小技巧,操作简单易上手. 01 拉伸图片人物不变形在我们在PS里想要拉伸一些图片时,里面的人物往往会跟着一起变形,那么如何改变图片比例的同时,又不影响人物的形 ...
python日期格式转换_python中有关时间日期格式转换问题
每次遇到pandas的dataframe某列日期格式问题总会哉坑,下面记录一下常用时间日期函数.... 1.字符串转化为日期 str->date import datetime date_str ...
java 把ascll转换成char_java中怎么把一个ascii转换成字符串
java中怎么把一个ascii转换成字符串关注:275 答案:3 信息版本:手机版电脑版解决时间 2021-01-18 08:53 提问者壹玍徴戰何亽陪 2021-01-17 22:42 ...
php中html页面时间戳直接转换成具体日期的写法
php中html页面时间戳直接转换成具体日期的写法 **{$v.time|date="Y-m-d H:i:s",###}**
怎么把qlv格式转换成mp4添加到编辑软件中
随着短视频不断的火爆越来越多人喜欢利用空余时间看一些短视频以打发琐碎的时间,而制作短视频往往是需要下载素材的,当我们通过各种途径下载到独家的qlv格式且不能添加到编辑软件时怎么办呢?此时我们就可以把q ...

使用正则表达式把IM聊天中的自定义表情格式转换成表情图片

使用正则表达式把IM聊天中的自定义表情格式转换成表情图片相关推荐

最新文章

热门文章