最近在做一个通讯类型的项目，当然离不开表情的发送与接收。在这块我大致说下回显，发送的时候你可以照着逻辑回绕下，发送较为简单。着重说下回显，项目采用的是vue-cli,在做表情回显的时候踩到了一些坑，在这篇文章中跟大家分享下我的解决方案，当然，你有更好的方法也可以进行发表评论。

     起初，我用到的方法是将聊天记录的内容进行遍历。再通过管道符进行内置的过滤方法处理。

<div class="cl-content-text-box">  // 组件中遍历的部分
{{ item.message | imgfilter }}
</div>

     list是我整理的表情包的数据，我拿到下标再进行本地图片的获取。假设给好友发送一个哈哈的表情，我们发送给后台的数据将是 ‘[哈哈]’这样式的，接受的时候同样也是这种格式的，处理的时候将内容中的‘[哈哈]’，这样的数据替换成我们本地的图片路径，再进行渲染。

const imgfilter = function (val) {
  console.log(val)
  return val.replace(/\[[^\]]+\]/g, function (tmp) {
    console.log(tmp)
    let img = document.createElement('img')
    let indexOf = list.findIndex(data => data.name === tmp)
    // let str = list[indexOf].src
    img.src = `static/emoticons/Expression_" + ${indexOf} + "@2x.png`
    // var img = "<img src='static/emoticons/Expression_" + indexOf + "@2x.png'>"
    return img
  })
}

以上代码的出的结论

      what? 什么鬼。后来又根据这种形式的进一步处理了一下，具体细节忘掉了，但是还是没达到想要的效果。中间也查了一些资料，这样的情况目前还不知道解决办法。

后来再处理中，也遇到了最后以字符串的形式显示到页面上了。‘<img src='路径' >’。。。。有点扯，还不是想要的，vue中的胡子语法支持方法、表达式，但并解析不了字符串的元素。果断换了一个方案。

<div class="cl-content-text-box" v-html="$options.filters.dataImgFilter(item.message)">
</div>

使用了$options,它用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用，我在一个自定义属性的方法中定义了一个自定义的filter，在通过v-html，他可以解析标签元素。在pc中发送><&等，这些字符他会隐式转换成转义字符，同样的我们在下面的方法中一同将它替换掉

转义字符

filters: {
    dataImgFilter: function (val) {
      var arrEntities = {'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"'}
      return val.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t] })
        .replace(/\[[^\]]+\]/g, function (tmp) {
          let indexOf = EMOTIONSLIST.findIndex(data => data.name === tmp)
          var img = `<img src='/static/emoticons/Expression_${indexOf + 1}@2x.png' style="width: 20px;height: 20px;">`
          return img
        })
    }
  },

圆满解决图像回显