js解析QQ表情和emoji表情

使用的是vue

思路：

• 前端接受到的消息（我是json格式），匹配出QQ表情和emoji
• 匹配的格式见代码，需要注意的是emoji要先把数据通过escape转换成unicode之后再匹配
• 匹配的结果都是数组，遍历数组，将匹配的内容替换为img，emoji replace后需要unescape一下
• v-for遍历之后，使用v-html展示内容，不能用v-text，不然选然后是字符串
• 需要有qq_arry={‘表情’,‘url地址’}，emoji={‘e…’,‘1f…’}前面是微信的emoji表情编码后面是对应的emoji表情编码；这里你也可以向qq表情一样保存emoji表情编码和url地址
• 其他 本法的emoji表情和微信emoji有差异；

直接上js

 chats2 () {
 	  // 这里是要解析的数据，我是json
      let chats = this.chats
      // 解析后的数据
      let chats2 = {}
      // 匹配QQ表情
      let reg = /\[[\u4e00-\u9fa5]{1,3}\]|\[\w{1,3}\]/gi
      // 匹配emoji
      let reg2 = /\\uE[\w]{3}/gi
      // 替换的规则
      let reg3 = /%ue|%uE/g
      // 换行
      let reg4 = /%0A/g
      let i = 0
      // 如果有内容
      if (chats[0]) {
        for (const chat of chats) {
          let val = chat.content
          console.log(escape(val))
          // 判断数据类型，有很多类型 这里只展示text
          if (chat.contentType === 'Text') {
            let results = val.match(reg)
            // 如果消息中有QQ表情
            if (results) {
              for (const res of results) {
                let r = res.replace('[', '').replace(']', '')
                // phizList {''key,'value'} key是'微笑' val是 url
                val = val.replace(res, '<img src="' + this.phizList[r] + '" alt="" >')
              }
            }

            let val2 = escape(val).replace(reg3, '\\ue')
            val2 = val2.replace(reg4, '<br/>')
            let results2 = val2.match(reg2)
            // console.log(results2)
            if (results2) {
              for (const emoji of results2) {
                // console.log(emoji)
                // emojiArr= {'key','value'} key是表情编码 value是对应的url的文件名
                let pngName = emojis.emojiArr[emoji.replace('\\u', '').toLowerCase()]
                // console.log(pngName)
                // 这个也能显示emoji 不过效果差异比较明显
                // val2 = val2.replace(emoji, '&#x' + pngName + ';')
                val2 = val2.replace(emoji, '<img style="width:18px;height:18px;margin-right:1px;display:inline;" src="https://twemoji.maxcdn.com/2/72x72/' + pngName + '.png" alt="" >')
              }
            }
            chat['content'] = unescape(val2)
          }
          chats2[i] = chat
          // console.log(chats2)
          i++
        }
      }
      console.log(chats2)
      return chats2
    }

html

<div v-if="chat.contentType==='Text'" class="triangle text" v-html="chat.content"></div>

欢迎留言交流