评论表情包设计

我想在留言中加入表情包，增加用户体验感。但是表情包的解析和渲染是个问题。下面是演示：

首先我们要知道表情包的实质是一张一张的图片, 图片有src属性, title属性, width属性等等
下面开始表情包功能的设计:
1. 我们把图片存储到自己的云服务器上, 并且以0.gif, 1.gif, 2.gif, 、、、(对应数组下标)的形式命名
2. 前端定义一个数组用于存储表情包图片title：

let emotionList = ["哈哈大笑", "挑眉", "耍酷", "送花", "抱拳", "鞭炮", "灯笼"] 

每个图片的title和src属性是一 一对应的, 为表情包图片设置一个合适的大小

 3. 绑定点击事件, 通过字符串 [用户输入文字] + `#${title};` 模板字符串拼接的方法与普通文本区别开, 传入后端在数据库中存起来
4. 前端在发送查询请求拿到留言后, 利用正则对留言进行替换处理
全局匹配由#号和;包裹的1~4位字符，在标题数组中查找, 找到则替换成`<img src="[服务器地址] + [数组下标] + .gif"`的图像标签, 用v-html解析标签；未找到则按原字符串渲染

const convert = (comment: string): string => {
  let truthComment = comment.replace(/\#[\u4E00-\u9FA5]{1,4}\;/gi, (words) => {
     let word = words.replace(/\#|\;/gi, '')
     console.log('emotion_name: ' + word);
     if (emotionList.indexOf(word) !== -1) {
        return `<img src="http://yqjimli.love/emotion/${emotionList.indexOf(word)}.gif" 
                width="19px" align="middle">`
     }
     else return words
  })
  return truthComment;
}