微信表情 emoji

 项目中需要回显微信聊天记录中的表情

const emojiJson = {
    '[微笑]': 'smiley_0',
    '[撇嘴]': 'smiley_1',
    '[色]': 'smiley_2',
    '[发呆]': 'smiley_3',
    '[得意]': 'smiley_4',
    '[流泪]': 'smiley_5',
    '[害羞]': 'smiley_6',
    '[闭嘴]': 'smiley_7',
    '[睡]': 'smiley_8',
    '[大哭]': 'smiley_9',
    '[尴尬]': 'smiley_10',
    '[发怒]': 'smiley_11',
    '[调皮]': 'smiley_12',
    '[呲牙]': 'smiley_13',
    '[惊讶]': 'smiley_14',
    '[难过]': 'smiley_15',
    '[冷汗]': 'smiley_17',
    '[抓狂]': 'smiley_18',
    '[吐]': 'smiley_19',
    '[偷笑]': 'smiley_20',
    '[愉快]': 'smiley_21',
    '[白眼]': 'smiley_22',
    '[傲慢]': 'smiley_23',
    '[困]': 'smiley_25',
    '[惊恐]': 'smiley_26',
    '[流汗]': 'smiley_27',
    '[憨笑]': 'smiley_28',
    '[悠闲]': 'smiley_29',
    '[奋斗]': 'smiley_30',
    '[咒骂]': 'smiley_31',
    '[疑问]': 'smiley_32',
    '[嘘]': 'smiley_33',
    '[晕]': 'smiley_34',
    '[衰]': 'smiley_36',
    '[骷髅]': 'smiley_37',
    '[敲打]': 'smiley_38',
    '[再见]': 'smiley_39',
    '[擦汗]': 'smiley_40',
    '[抠鼻]': 'smiley_41',
    '[鼓掌]': 'smiley_42',
    '[坏笑]': 'smiley_44',
    '[左哼哼]': 'smiley_45',
    '[右哼哼]': 'smiley_46',
    '[哈欠]': 'smiley_47',
    '[鄙视]': 'smiley_48',
    '[委屈]': 'smiley_49',
    '[快哭了]': 'smiley_50',
    '[阴险]': 'smiley_51',
    '[亲亲]': 'smiley_52',
    '[可怜]': 'smiley_54',
    '[菜刀]': 'smiley_55',
    '[西瓜]': 'smiley_56',
    '[啤酒]': 'smiley_57',
    '[咖啡]': 'smiley_60',
    '[饭]': 'smiley_61',
    '[猪头]': 'smiley_62',
    '[玫瑰]': 'smiley_63',
    '[凋谢]': 'smiley_64',
    '[嘴唇]': 'smiley_65',
    '[爱心]': 'smiley_66',
    '[心碎]': 'smiley_67',
    '[炸弹]': 'smiley_70',
    '[便便]': 'smiley_74',
    '[月亮]': 'smiley_75',
    '[太阳]': 'smiley_76',
    '[礼物]': 'u1F381',
    '[拥抱]': 'smiley_78',
    '[强]': 'smiley_79',
    '[弱]': 'smiley_80',
    '[握手]': 'smiley_81',
    '[胜利]': 'smiley_82',
    '[抱拳]': 'smiley_83',
    '[勾引]': 'smiley_84',
    '[拳头]': 'smiley_85',
    '[OK]': 'smiley_89',
    '[跳跳]': 'smiley_92',
    '[发抖]': 'smiley_93',
    '[怄火]': 'smiley_94',
    '[转圈]': 'smiley_95',

    '[嘿哈]': 'e2_04',
    '[捂脸]': 'e2_05',
    '[奸笑]': 'e2_02',
    '[机智]': 'e2_06',
    '[红包]': 'e2_09',
    '[耶]': 'e2_11',
    '[皱眉]': 'e2_12',
    '[發]': 'e2_13',
    '[鸡]': 'e2_14',
    '[福]': 'e2_15',
    '[烟花]': 'e2_16',
    '[爆竹]': 'e2_17',
    '[裂开]':'e2_18',
    '[苦涩]':'e2_19',
    '[叹气]':'e2_20',
    '[让我看看]':'e2_21',
    '[666]':'e2_22',
    '[翻白眼]':'e2_23',
    '[蛋糕]':'e2_24',
   
    '[笑脸]': 'u1F604',
    '[生病]': 'u1F637',
    '[破涕为笑]': 'u1F602',
    '[吐舌]': 'u1F61D',
    '[脸红]': 'u1F633',
    '[恐惧]': 'u1F631',
    '[失望]': 'u1F614',
    '[无语]': 'u1F612',
    '[鬼魂]': 'u1F47B',
    '[合十]': 'u1F64F',
    '[强壮]': 'u1F4AA',
    '[庆祝]': 'u1F389',
    
    '[吃瓜]': 'smiley_313',
    '[加油]': 'smiley_314',
    '[汗]': 'smiley_315',
    '[天啊]': 'smiley_316',
    '[Emm]': 'smiley_317',
    '[社会社会]': 'smiley_318',
    '[旺柴]': 'smiley_319',
    '[好的]': 'smiley_320',
    '[打脸]': 'smiley_321',
    '[哇]': 'smiley_322',
    '[囧]': 'smiley_17'
  }
   
  const encodeEmoji = (str) => {
    
    if (!str) {
      return;
    }
    let domEle = str
    let pattern = /\[.*?\]/g;
    let unicodeStr = str.replace(pattern,function (match) {
       
      if(emojiJson[match]){
        domEle = domEle.replace(match,'<span title="'+match+'" class="small qqface '+ emojiJson[match] +'"></span>')
      }else {
        //domEle = match
      }
    })
    return domEle
  }
   
  export {encodeEmoji,emojiJson};

.qqface {
    zoom: calc(22 / 64);
    display: inline-block;
    vertical-align: middle;
    width: 64px;
    height: 64px;
    font-size: 0;
    text-indent: -999em;
    background: url('./emoji.png') 0 0;
}

.e2_02 {
    background-position: -66px 0
}

.e2_04 {
    background-position: -462px -396px
}

.e2_05 {
    background-position: 0 -66px
}

.e2_06 {
    background-position: -66px -66px
}

.e2_09 {
    background-position: -132px 0
}

.e2_11 {
    background-position: -132px -66px
}

.e2_12 {
    background-position: 0 -132px
}

.e2_13 {
    background-position: -66px -659px
}

.e2_14 {
    background-position: -66px -132px
}
.e2_15 {
    background-position: -0 -659px
}
.e2_16 {
    background-position: -132px -659px
}
.e2_17 {
    background-position: -198px -659px
}
.e2_18 {
    background-position: -462px -659px
}
.e2_19 {
    background-position: -396px -659px
}
.e2_20 {
    background-position: -329px -659px
}
.e2_21 {
    background-position: -264px -659px
}
.e2_22 {
    background-position: -528px -659px
}
.e2_23 {
    background-position: -594px -659px
}
.e2_24 {
    background-position: -264px -528px
}

.smiley_0 {
    background-position: -132px -132px;
}

.smiley_1 {
    width: 63px;
    background-position: -660px -594px
}

.smiley_10 {
    background-position: -198px -66px
}

.smiley_11 {
    background-position: -198px -132px
}

.smiley_12 {
    background-position: 0 -198px
}

.smiley_13 {
    background-position: -66px -198px
}

.smiley_14 {
    background-position: -132px -198px
}

.smiley_15 {
    background-position: -198px -198px
}

.smiley_17 {
    background-position: -264px 0
}

.smiley_18 {
    background-position: -264px -66px
}

.smiley_19 {
    background-position: -264px -132px
}

.smiley_2 {
    background-position: -264px -198px
}

.smiley_20 {
    background-position: 0 -264px
}

.smiley_21 {
    background-position: -66px -264px
}

.smiley_22 {
    background-position: -132px -264px
}

.smiley_23 {
    background-position: -198px -264px
}

.smiley_25 {
    background-position: -264px -264px
}

.smiley_26 {
    background-position: -330px 0
}

.smiley_27 {
    background-position: -330px -66px
}

.smiley_28 {
    background-position: -330px -132px
}

.smiley_29 {
    background-position: -330px -198px
}

.smiley_3 {
    background-position: -330px -264px
}

.smiley_30 {
    background-position: 0 -330px
}

.smiley_31 {
    background-position: -66px -330px
}

.smiley_313 {
    background-position: -132px -330px
}

.smiley_314 {
    background-position: -198px -330px
}

.smiley_315 {
    background-position: -264px -330px
}

.smiley_316 {
    background-position: -330px -330px
}

.smiley_317 {
    background-position: -396px 0
}

.smiley_318 {
    background-position: -396px -66px
}

.smiley_319 {
    background-position: -396px -132px
}

.smiley_32 {
    background-position: -396px -198px
}

.smiley_320 {
    background-position: -396px -264px
}

.smiley_321 {
    background-position: -396px -330px
}

.smiley_322 {
    background-position: 0 -396px
}

.smiley_33 {
    background-position: -66px -396px
}

.smiley_34 {
    background-position: -132px -396px
}

.smiley_36 {
    background-position: -198px -396px
}

.smiley_37 {
    background-position: -264px -396px
}

.smiley_38 {
    background-position: -330px -396px
}

.smiley_39 {
    background-position: -396px -396px
}

.smiley_4 {
    background-position: -462px 0
}

.smiley_40 {
    background-position: -462px -66px
}

.smiley_41 {
    background-position: -462px -132px
}

.smiley_42 {
    background-position: -462px -198px
}

.smiley_44 {
    background-position: -462px -264px
}

.smiley_45 {
    background-position: -462px -330px
}

.smiley_46 {
    background-position: 0 0
}

.smiley_47 {
    background-position: 0 -462px
}

.smiley_48 {
    background-position: -66px -462px
}

.smiley_49 {
    background-position: -132px -462px
}

.smiley_5 {
    background-position: -198px -462px
}

.smiley_50 {
    background-position: -264px -462px
}

.smiley_51 {
    background-position: -330px -462px
}

.smiley_52 {
    background-position: -396px -462px
}

.smiley_54 {
    background-position: -462px -462px
}

.smiley_55 {
    background-position: -528px 0
}

.smiley_56 {
    background-position: -528px -66px
}

.smiley_57 {
    background-position: -528px -132px
}

.smiley_6 {
    background-position: -528px -198px
}

.smiley_60 {
    background-position: -528px -264px
}

.smiley_61 {
    background-position: -528px -330px
}

.smiley_62 {
    background-position: -528px -396px
}

.smiley_63 {
    background-position: -528px -462px
}

.smiley_64 {
    background-position: 0 -528px
}

.smiley_65 {
    background-position: -66px -528px
}

.smiley_66 {
    background-position: -132px -528px
}

.smiley_67 {
    background-position: -198px -528px
}

.smiley_68 {
    background-position: -264px -528px
}

.smiley_7 {
    background-position: -330px -528px
}

.smiley_70 {
    background-position: -396px -528px
}

.smiley_74 {
    background-position: -462px -528px
}

.smiley_75 {
    background-position: -528px -528px
}

.smiley_76 {
    background-position: -594px 0
}

.smiley_78 {
    background-position: -594px -66px
}

.smiley_79 {
    background-position: -594px -132px
}

.smiley_8 {
    background-position: -594px -198px
}

.smiley_80 {
    background-position: -594px -264px
}

.smiley_81 {
    background-position: -594px -330px
}

.smiley_82 {
    background-position: -594px -396px
}

.smiley_83 {
    background-position: -594px -462px
}

.smiley_84 {
    background-position: -594px -528px
}

.smiley_85 {
    background-position: 0 -594px
}

.smiley_89 {
    background-position: -66px -594px
}

.smiley_9 {
    background-position: -132px -594px
}

.smiley_92 {
    background-position: -198px -594px
}

.smiley_93 {
    background-position: -264px -594px
}

.smiley_94 {
    background-position: -330px -594px
}

.smiley_95 {
    background-position: -396px -594px
}

.u1F381 {
    background-position: -462px -594px
}

.u1F389 {
    background-position: -528px -594px
}

.u1F47B {
    background-position: -594px -594px
}

.u1F4AA {
    background-position: -660px 0
}

.u1F602 {
    background-position: -660px -66px
}

.u1F604 {
    background-position: -660px -132px
}

.u1F612 {
    background-position: -660px -198px
}

.u1F614 {
    background-position: -660px -264px
}

.u1F61D {
    background-position: -660px -330px
}

.u1F631 {
    background-position: -660px -396px
}

.u1F633 {
    background-position: -660px -462px
}

.u1F637 {
    background-position: -198px 0
}

.u1F64F {
    background-position: -660px -528px
}

.smiley_400 {
    background-position: -264px 0
}