vue实现微信聊天emoji

使用场景：拿到微信聊天的数据，重现文本中的emoji

思路：主要是通过正则进行匹配，拿到表情库资源，再通过img标签的src进行展示，再在组件里面通过v-html进行展示

未来扩展：表情组件，把所有表情通过img展示出来，然后点击获取它对应的文本

# emoji.js
const emoji = [
  { alt: '[微笑]', src: './emoji/1.png', title: '/::)' },
  { alt: '[撇嘴]', src: './emoji/2.png', title: '/::~' },
  { alt: '[色]', src: './emoji/3.png', title: '/::B' },
  { alt: '[发呆]', src: 'emoji/4.png', title: '/::|' },
  { alt: '[得意]', src: 'emoji/5.png', title: '/:8-)' },
  { alt: '[流泪]', src: 'emoji/6.png', title: '/::<' },
  { alt: '[害羞]', src: 'emoji/7.png', title: '/::$' },
  { alt: '[闭嘴]', src: 'emoji/8.png', title: '/::X' },
  { alt: '[睡]', src: 'emoji/9.png', title: '/::Z' },
  { alt: '[大哭]', src: 'emoji/10.png', title: '/::’(' },
  { alt: '[尴尬]', src: 'emoji/11.png', title: '/::-|' },
  { alt: '[发怒]', src: 'emoji/12.png', title: '/::@' },
  { alt: '[调皮]', src: 'emoji/13.png', title: '/::P' },
  { alt: '[呲牙]', src: 'emoji/14.png', title: '/::D' },
  { alt: '[惊讶]', src: 'emoji/15.png', title: '/::O' },
  { alt: '[难过]', src: 'emoji/16.png', title: '/::(' },
  { alt: '[囧]', src: 'emoji/17.png', title: '/::-|' },
  { alt: '[抓狂]', src: 'emoji/18.png', title: '/::Q' },
  { alt: '[吐]', src: 'emoji/19.png', title: '/::T' },
  { alt: '[偷笑]', src: 'emoji/20.png', title: '/:,@P' },
  { alt: '[愉快]', src: 'emoji/21.png', title: '/:,@-D' },
  { alt: '[白眼]', src: 'emoji/22.png', title: '/::d' },
  { alt: '[傲慢]', src: 'emoji/23.png', title: '/:,@o' },
  { alt: '[困]', src: 'emoji/24.png', title: '/:|-)' },
  { alt: '[惊恐]', src: 'emoji/25.png', title: '/::!' },
  { alt: '[流汗]', src: 'emoji/26.png', title: '/::L' },
  { alt: '[憨笑]', src: 'emoji/27.png', title: '/::>' },
  { alt: '[悠闲]', src: 'emoji/28.png', title: '/::,@' },
  { alt: '[奋斗]', src: 'emoji/29.png', title: '/:,@f' },
  { alt: '[咒骂]', src: 'emoji/30.png', title: '/::-S' },
  { alt: '[疑问]', src: 'emoji/31.png', title: '/:?' },
  { alt: '[嘘]', src: 'emoji/32.png', title: '/:,@x' },
  { alt: '[晕]', src: 'emoji/33.png', title: '/:,@@' },
  { alt: '[衰]', src: 'emoji/34.png', title: '/:,@!' },
  { alt: '[骷髅]', src: 'emoji/35.png', title: '/:!!!' },
  { alt: '[敲打]', src: 'emoji/36.png', title: '/:xx' },
  { alt: '[再见]', src: 'emoji/37.png', title: '/:bye' },
  { alt: '[擦汗]', src: 'emoji/38.png', title: '/:wipe' },
  { alt: '[抠鼻]', src: 'emoji/39.png', title: '/:dig' },
  { alt: '[鼓掌]', src: 'emoji/40.png', title: '/:handclap' },
  { alt: '[坏笑]', src: 'emoji/41.png', title: '/:B-)' },
  { alt: '[左哼哼]', src: 'emoji/42.png', title: '/:<@' },
  { alt: '[右哼哼]', src: 'emoji/43.png', title: '/:@>' },
  { alt: '[哈欠]', src: 'emoji/44.png', title: '/::-O' },
  { alt: '[鄙视]', src: 'emoji/45.png', title: '/:>-|' },
  { alt: '[委屈]', src: 'emoji/46.png', title: '/:P-(' },
  { alt: '[快哭了]', src: 'emoji/47.png', title: '/::’|' },
  { alt: '[阴险]', src: 'emoji/48.png', title: '/:X-)' },
  { alt: '[亲亲]', src: 'emoji/49.png', title: '/::*' },
  { alt: '[可怜]', src: 'emoji/50.png', title: '/:8*' },
  { alt: '[菜刀]', src: 'emoji/51.png', title: '/:pd' },
  { alt: '[西瓜]', src: 'emoji/52.png', title: '/:<W>' },
  { alt: '[啤酒]', src: 'emoji/53.png', title: '/:beer' },
  { alt: '[咖啡]', src: 'emoji/54.png', title: '/:coffee' },
  { alt: '[猪头]', src: 'emoji/55.png', title: '/:pig' },
  { alt: '[玫瑰]', src: 'emoji/56.png', title: '/:rose' },
  { alt: '[凋谢]', src: 'emoji/57.png', title: '/:fade' },
  { alt: '[嘴唇]', src: 'emoji/58.png', title: '/:showlove' },
  { alt: '[爱心]', src: 'emoji/59.png', title: '/:heart' },
  { alt: '[心碎]', src: 'emoji/60.png', title: '/:break' },
  { alt: '[蛋糕]', src: 'emoji/61.png', title: '/:cake' },
  { alt: '[炸弹]', src: 'emoji/62.png', title: '/:bome' },
  { alt: '[便便]', src: 'emoji/63.png', title: '/:shit-' },
  { alt: '[月亮]', src: 'emoji/64.png', title: '/:moon' },
  { alt: '[太阳]', src: 'emoji/65.png', title: '/:sun' },
  { alt: '[拥抱]', src: 'emoji/66.png', title: '/:hug' },
  { alt: '[强]', src: 'emoji/67.png', title: '/:strong' },
  { alt: '[弱]', src: 'emoji/68.png', title: '/:weak' },
  { alt: '[握手]', src: 'emoji/69.png', title: '/:share' },
  { alt: '[胜利]', src: 'emoji/70.png', title: '/:v' },
  { alt: '[抱拳]', src: 'emoji/71.png', title: '/:@)' },
  { alt: '[勾引]', src: 'emoji/72.png', title: '/:jj' },
  { alt: '[拳头]', src: 'emoji/73.png', title: '/:@@' },
  { alt: '[OK]', src: 'emoji/74.png', title: '/:ok' },
  { alt: '[跳跳]', src: 'emoji/75.png', title: '/:jump' },
  { alt: '[发抖]', src: 'emoji/76.png', title: '/:shake' },
  { alt: '[怄火]', src: 'emoji/77.png', title: '/:' },
  { alt: '[转圈]', src: 'emoji/78.png', title: '/:circle' }
]

let alt = emoji.reduce((str, e) => {
  str = str + '|' + e.alt.split(/\[(.+?)\]/g)[1]
  return str
}, '')
alt = alt.substring(1)

export const emojiReg = new RegExp(`\\[(${alt})\\]`, 'g')

function getIndex (alt) {
  let obj = {}
  for (let i = 0; i < emoji.length; i++) {
    if (emoji[i].alt === alt) {
      obj = emoji[i]
    }
  }
  return obj
}
export function textConvert (content) {
  let text = content
  // const regex2 = /\[(.+?)\]/g // [] 中括号
  // 输出是一个数组
  const strArrow = text.split(emojiReg)
  let emojiArr
  if (strArrow.length > 0) {
    const arr = strArrow.filter((e, index) => {
      return index % 2 === 1
    })
    emojiArr = arr.map(e => {
      return '[' + e + ']'
    })
    console.log(emojiArr)
  }
  if (strArrow?.length > 0) {
    emojiArr.forEach((element) => {
      const idx = getIndex(element)
      if (JSON.stringify(idx) === '{}') {
        text = content
      } else {
        text = text.replace(
          element,
          `<img style='width:20px;height:20px' src='../../../../../../../../static/${idx.src}')></img>`
        )
      }
    })
  }
  return text
}

好不容易找到的emoji资源，也在此记录一下吧

{
    "/::)": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif",
    "/::~": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/1.gif",
    "/::B": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/2.gif",
    "/::|": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/3.gif",
    "/:8-)": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/4.gif",
    "/::<": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/5.gif",
    "/::$": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/6.gif",
    "/::X": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/7.gif",
    "/::Z": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/8.gif",
    "/::'(": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/9.gif",
    "/::-|": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/10.gif",
    "/::@": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/11.gif",
    "/::P": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/12.gif",
    "/::D": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/13.gif",
    "/::O": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/14.gif",
    "/::(": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/15.gif",
    "/::+": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/16.gif",
    "/:--b": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/17.gif",
    "/::Q": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/18.gif",
    "/::T": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/19.gif",
    "/:,@P": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/20.gif",
    "/:,@-D": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/21.gif",
    "/::d": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/22.gif",
    "/:,@o": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/23.gif",
    "/::g": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/24.gif",
    "/:|-)": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/25.gif",
    "/::!": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/26.gif",
    "/::L": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/27.gif",
    "/::>": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/28.gif",
    "/::,@": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/29.gif",
    "/:,@f": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/30.gif",
    "/::-S": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/31.gif",
    "/:?": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/32.gif",
    "/:,@x": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/33.gif",
    "/:,@@": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/34.gif",
    "/::8": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/35.gif",
    "/:,@!": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/36.gif",
    "/:!!!": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/37.gif",
    "/:xx": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/38.gif",
    "/:bye": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/39.gif",
    "/:wipe": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/40.gif",
    "/:dig": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/41.gif",
    "/:handclap": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/42.gif",
    "/:&-(": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/43.gif",
    "/:B-)": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/44.gif",
    "/:<@": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/45.gif",
    "/:@>": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/46.gif",
    "/::-O": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/47.gif",
    "/:>-|": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/48.gif",
    "/:P-(": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/49.gif",
    "/::'|": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/50.gif",
    "/:X-)": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/51.gif",
    "/::*": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/52.gif",
    "/:@x": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/53.gif",
    "/:8*": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/54.gif",
    "/:pd": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/55.gif",
    "/:<W>": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/56.gif",
    "/:beer": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/57.gif",
    "/:basketb": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/58.gif",
    "/:oo": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/59.gif",
    "/:coffee": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/60.gif",
    "/:eat": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/61.gif",
    "/:pig": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/62.gif",
    "/:rose": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/63.gif",
    "/:fade": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/64.gif",
    "/:showlove": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/65.gif",
    "/:heart": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/66.gif",
    "/:break": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/67.gif",
    "/:cake": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/68.gif",
    "/:li": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/69.gif",
    "/:bome": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/70.gif",
    "/:kn": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/71.gif",
    "/:footb": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/72.gif",
    "/:ladybug": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/73.gif",
    "/:shit": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/74.gif",
    "/:moon": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/75.gif",
    "/:sun": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/76.gif",
    "/:gift": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/77.gif",
    "/:hug": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/78.gif",
    "/:strong": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/79.gif",
    "/:weak": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/80.gif",
    "/:share": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/81.gif",
    "/:v": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/82.gif",
    "/:@)": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/83.gif",
    "/:jj": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/84.gif",
    "/:@@": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/85.gif",
    "/:bad": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/86.gif",
    "/:lvu": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/87.gif",
    "/:no": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/88.gif",
    "/:ok": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/89.gif",
    "/:love": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/90.gif",
    "/:<L>": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/91.gif",
    "/:jump": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/92.gif",
    "/:shake": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/93.gif",
    "/:<O>": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/94.gif",
    "/:circle": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/95.gif",
    "/:kotow": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/96.gif",
    "/:turn": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/97.gif",
    "/:skip": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/98.gif",
    "/:oY": "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/99.gif"
  }