使用的是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>

歡迎留言交流