使用正则表达式把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="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>

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

猜你喜欢