emoji.js

最近公司 项目有个需求是，回显微信聊天记录。
内容显示微信正常聊天对话

image.png

在此今天说下回显微信常用表情

产品的预期

image.png

我的预期

[微笑]微笑[撇嘴]撇嘴哈哈哈哈哈哈[微笑][撇嘴][色][发呆][得意][流泪][害羞][闭嘴][睡]

然后查看了下接口数据，我尼玛，后台抓取到的表情直接显示为文本类型？？？
奈何网上没有现成的插件可以直接回显，只好自己手动封装手写。
经过一番研究，特此记录下。

bulingbuling

先说下大致思路：

1. 需要一张完整表情包的精灵图，
2. 用正则去匹配[***]这种文本
3. 再写个json对照表，匹配到的再用json去匹配对应的style样式。
4. 利用background-position读取每个表情包对应在精灵图上的位置。

emoji.png

先献上一张完整的表情精灵图。

js代码部分

function encodeEmoji(str){
  let pattern = /\[.*?\]/g;
  let unicodeStr = str.replace(pattern,function (match) {
    if(emojiJson[match]){
      return `<span class="small qqface ${emojiJson[match]}"></span>`
    }else return match
  })
  return unicodeStr
}

json对照表

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_12',
  '[耶]': 'e2_11',
  '[红包]': 'e2_09',
  '[發]': 'e2_09',
  '[福]': 'e2_09',
  '[鸡]': 'e2_14',
  '[笑脸]': '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'
}

export default emojiJson

css部分 用的scss文件

.e2_02, .e2_04, .e2_05, .e2_06, .e2_09, .e2_11, .e2_12, .e2_14, .smiley_0, .smiley_1, .smiley_10, .smiley_11, .smiley_12, .smiley_13, .smiley_14, .smiley_15, .smiley_17, .smiley_18, .smiley_19, .smiley_2, .smiley_20, .smiley_21, .smiley_22, .smiley_23, .smiley_25, .smiley_26, .smiley_27, .smiley_28, .smiley_29, .smiley_3, .smiley_30, .smiley_31, .smiley_313, .smiley_314, .smiley_315, .smiley_316, .smiley_317, .smiley_318, .smiley_319, .smiley_32, .smiley_320, .smiley_321, .smiley_322, .smiley_33, .smiley_34, .smiley_36, .smiley_37, .smiley_38, .smiley_39, .smiley_4, .smiley_40, .smiley_41, .smiley_42, .smiley_44, .smiley_45, .smiley_46, .smiley_47, .smiley_48, .smiley_49, .smiley_5, .smiley_50, .smiley_51, .smiley_52, .smiley_54, .smiley_55, .smiley_56, .smiley_57, .smiley_6, .smiley_60, .smiley_61, .smiley_62, .smiley_63, .smiley_64, .smiley_65, .smiley_66, .smiley_67, .smiley_68, .smiley_7, .smiley_70, .smiley_74, .smiley_75, .smiley_76, .smiley_78, .smiley_79, .smiley_8, .smiley_80, .smiley_81, .smiley_82, .smiley_83, .smiley_84, .smiley_85, .smiley_89, .smiley_9, .smiley_92, .smiley_93, .smiley_94, .smiley_95, .u1F381, .u1F389, .u1F47B, .u1F4AA, .u1F602, .u1F604, .u1F612, .u1F614, .u1F61D, .u1F631, .u1F633, .u1F637, .u1F64F {
  display: inline-block;
  background-repeat: no-repeat;
}

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

  &.e2_02 {
    width: 64px;
    height: 64px;
    background-position: -66px 0
  }

  &.e2_04 {
    width: 64px;
    height: 64px;
    background-position: -462px -396px
  }

  &.e2_05 {
    width: 64px;
    height: 64px;
    background-position: 0 -66px
  }

  &.e2_06 {
    width: 64px;
    height: 64px;
    background-position: -66px -66px
  }

  &.e2_09 {
    width: 64px;
    height: 64px;
    background-position: -132px 0
  }

  &.e2_11 {
    width: 64px;
    height: 64px;
    background-position: -132px -66px
  }

  &.e2_12 {
    width: 64px;
    height: 64px;
    background-position: 0 -132px
  }

  &.e2_14 {
    width: 64px;
    height: 64px;
    background-position: -66px -132px
  }

  &.smiley_0 {
    width: 64px;
    height: 64px;
    background-position: -132px -132px;
  }

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

  &.smiley_10 {
    width: 64px;
    height: 64px;
    background-position: -198px -66px
  }

  &.smiley_11 {
    width: 64px;
    height: 64px;
    background-position: -198px -132px
  }

  &.smiley_12 {
    width: 64px;
    height: 64px;
    background-position: 0 -198px
  }

  &.smiley_13 {
    width: 64px;
    height: 64px;
    background-position: -66px -198px
  }

  &.smiley_14 {
    width: 64px;
    height: 64px;
    background-position: -132px -198px
  }

  &.smiley_15 {
    width: 64px;
    height: 64px;
    background-position: -198px -198px
  }

  &.smiley_17 {
    width: 64px;
    height: 64px;
    background-position: -264px 0
  }

  &.smiley_18 {
    width: 64px;
    height: 64px;
    background-position: -264px -66px
  }

  &.smiley_19 {
    width: 64px;
    height: 64px;
    background-position: -264px -132px
  }

  &.smiley_2 {
    width: 64px;
    height: 64px;
    background-position: -264px -198px
  }

  &.smiley_20 {
    width: 64px;
    height: 64px;
    background-position: 0 -264px
  }

  &.smiley_21 {
    width: 64px;
    height: 64px;
    background-position: -66px -264px
  }

  &.smiley_22 {
    width: 64px;
    height: 64px;
    background-position: -132px -264px
  }

  &.smiley_23 {
    width: 64px;
    height: 64px;
    background-position: -198px -264px
  }

  &.smiley_25 {
    width: 64px;
    height: 64px;
    background-position: -264px -264px
  }

  &.smiley_26 {
    width: 64px;
    height: 64px;
    background-position: -330px 0
  }

  &.smiley_27 {
    width: 64px;
    height: 64px;
    background-position: -330px -66px
  }

  &.smiley_28 {
    width: 64px;
    height: 64px;
    background-position: -330px -132px
  }

  &.smiley_29 {
    width: 64px;
    height: 64px;
    background-position: -330px -198px
  }

  &.smiley_3 {
    width: 64px;
    height: 64px;
    background-position: -330px -264px
  }

  &.smiley_30 {
    width: 64px;
    height: 64px;
    background-position: 0 -330px
  }

  &.smiley_31 {
    width: 64px;
    height: 64px;
    background-position: -66px -330px
  }

  &.smiley_313 {
    width: 64px;
    height: 64px;
    background-position: -132px -330px
  }

  &.smiley_314 {
    width: 64px;
    height: 64px;
    background-position: -198px -330px
  }

  &.smiley_315 {
    width: 64px;
    height: 64px;
    background-position: -264px -330px
  }

  &.smiley_316 {
    width: 64px;
    height: 64px;
    background-position: -330px -330px
  }

  &.smiley_317 {
    width: 64px;
    height: 64px;
    background-position: -396px 0
  }

  &.smiley_318 {
    width: 64px;
    height: 64px;
    background-position: -396px -66px
  }

  &.smiley_319 {
    width: 64px;
    height: 64px;
    background-position: -396px -132px
  }

  &.smiley_32 {
    width: 64px;
    height: 64px;
    background-position: -396px -198px
  }

  &.smiley_320 {
    width: 64px;
    height: 64px;
    background-position: -396px -264px
  }

  &.smiley_321 {
    width: 64px;
    height: 64px;
    background-position: -396px -330px
  }

  &.smiley_322 {
    width: 64px;
    height: 64px;
    background-position: 0 -396px
  }

  &.smiley_33 {
    width: 64px;
    height: 64px;
    background-position: -66px -396px
  }

  &.smiley_34 {
    width: 64px;
    height: 64px;
    background-position: -132px -396px
  }

  &.smiley_36 {
    width: 64px;
    height: 64px;
    background-position: -198px -396px
  }

  &.smiley_37 {
    width: 64px;
    height: 64px;
    background-position: -264px -396px
  }

  &.smiley_38 {
    width: 64px;
    height: 64px;
    background-position: -330px -396px
  }

  &.smiley_39 {
    width: 64px;
    height: 64px;
    background-position: -396px -396px
  }

  &.smiley_4 {
    width: 64px;
    height: 64px;
    background-position: -462px 0
  }

  &.smiley_40 {
    width: 64px;
    height: 64px;
    background-position: -462px -66px
  }

  &.smiley_41 {
    width: 64px;
    height: 64px;
    background-position: -462px -132px
  }

  &.smiley_42 {
    width: 64px;
    height: 64px;
    background-position: -462px -198px
  }

  &.smiley_44 {
    width: 64px;
    height: 64px;
    background-position: -462px -264px
  }

  &.smiley_45 {
    width: 64px;
    height: 64px;
    background-position: -462px -330px
  }

  &.smiley_46 {
    width: 64px;
    height: 64px;
    background-position: 0 0
  }

  &.smiley_47 {
    width: 64px;
    height: 64px;
    background-position: 0 -462px
  }

  &.smiley_48 {
    width: 64px;
    height: 64px;
    background-position: -66px -462px
  }

  &.smiley_49 {
    width: 64px;
    height: 64px;
    background-position: -132px -462px
  }

  &.smiley_5 {
    width: 64px;
    height: 64px;
    background-position: -198px -462px
  }

  &.smiley_50 {
    width: 64px;
    height: 64px;
    background-position: -264px -462px
  }

  &.smiley_51 {
    width: 64px;
    height: 64px;
    background-position: -330px -462px
  }

  &.smiley_52 {
    width: 64px;
    height: 64px;
    background-position: -396px -462px
  }

  &.smiley_54 {
    width: 64px;
    height: 64px;
    background-position: -462px -462px
  }

  &.smiley_55 {
    width: 64px;
    height: 64px;
    background-position: -528px 0
  }

  &.smiley_56 {
    width: 64px;
    height: 64px;
    background-position: -528px -66px
  }

  &.smiley_57 {
    width: 64px;
    height: 64px;
    background-position: -528px -132px
  }

  &.smiley_6 {
    width: 64px;
    height: 64px;
    background-position: -528px -198px
  }

  &.smiley_60 {
    width: 64px;
    height: 64px;
    background-position: -528px -264px
  }

  &.smiley_61 {
    width: 64px;
    height: 64px;
    background-position: -528px -330px
  }

  &.smiley_62 {
    width: 64px;
    height: 64px;
    background-position: -528px -396px
  }

  &.smiley_63 {
    width: 64px;
    height: 64px;
    background-position: -528px -462px
  }

  &.smiley_64 {
    width: 64px;
    height: 64px;
    background-position: 0 -528px
  }

  &.smiley_65 {
    width: 64px;
    height: 64px;
    background-position: -66px -528px
  }

  &.smiley_66 {
    width: 64px;
    height: 64px;
    background-position: -132px -528px
  }

  &.smiley_67 {
    width: 64px;
    height: 64px;
    background-position: -198px -528px
  }

  &.smiley_68 {
    width: 64px;
    height: 64px;
    background-position: -264px -528px
  }

  &.smiley_7 {
    width: 64px;
    height: 64px;
    background-position: -330px -528px
  }

  &.smiley_70 {
    width: 64px;
    height: 64px;
    background-position: -396px -528px
  }

  &.smiley_74 {
    width: 64px;
    height: 64px;
    background-position: -462px -528px
  }

  &.smiley_75 {
    width: 64px;
    height: 64px;
    background-position: -528px -528px
  }

  &.smiley_76 {
    width: 64px;
    height: 64px;
    background-position: -594px 0
  }

  &.smiley_78 {
    width: 64px;
    height: 64px;
    background-position: -594px -66px
  }

  &.smiley_79 {
    width: 64px;
    height: 64px;
    background-position: -594px -132px
  }

  &.smiley_8 {
    width: 64px;
    height: 64px;
    background-position: -594px -198px
  }

  &.smiley_80 {
    width: 64px;
    height: 64px;
    background-position: -594px -264px
  }

  &.smiley_81 {
    width: 64px;
    height: 64px;
    background-position: -594px -330px
  }

  &.smiley_82 {
    width: 64px;
    height: 64px;
    background-position: -594px -396px
  }

  &.smiley_83 {
    width: 64px;
    height: 64px;
    background-position: -594px -462px
  }

  &.smiley_84 {
    width: 64px;
    height: 64px;
    background-position: -594px -528px
  }

  &.smiley_85 {
    width: 64px;
    height: 64px;
    background-position: 0 -594px
  }

  &.smiley_89 {
    width: 64px;
    height: 64px;
    background-position: -66px -594px
  }

  &.smiley_9 {
    width: 64px;
    height: 64px;
    background-position: -132px -594px
  }

  &.smiley_92 {
    width: 64px;
    height: 64px;
    background-position: -198px -594px
  }

  &.smiley_93 {
    width: 64px;
    height: 64px;
    background-position: -264px -594px
  }

  &.smiley_94 {
    width: 64px;
    height: 64px;
    background-position: -330px -594px
  }

  &.smiley_95 {
    width: 64px;
    height: 64px;
    background-position: -396px -594px
  }

  &.u1F381 {
    width: 64px;
    height: 64px;
    background-position: -462px -594px
  }

  &.u1F389 {
    width: 64px;
    height: 64px;
    background-position: -528px -594px
  }

  &.u1F47B {
    width: 64px;
    height: 64px;
    background-position: -594px -594px
  }

  &.u1F4AA {
    width: 64px;
    height: 64px;
    background-position: -660px 0
  }

  &.u1F602 {
    width: 64px;
    height: 64px;
    background-position: -660px -66px
  }

  &.u1F604 {
    width: 64px;
    height: 64px;
    background-position: -660px -132px
  }

  &.u1F612 {
    width: 64px;
    height: 64px;
    background-position: -660px -198px
  }

  &.u1F614 {
    width: 64px;
    height: 64px;
    background-position: -660px -264px
  }

  &.u1F61D {
    width: 64px;
    height: 64px;
    background-position: -660px -330px
  }

  &.u1F631 {
    width: 64px;
    height: 64px;
    background-position: -660px -396px
  }

  &.u1F633 {
    width: 64px;
    height: 64px;
    background-position: -660px -462px
  }

  &.u1F637 {
    width: 64px;
    height: 64px;
    background-position: -198px 0
  }

  &.u1F64F {
    width: 64px;
    height: 64px;
    background-position: -660px -528px
  }

  &.smiley_400 {
    width: 64px;
    height: 64px;
    background-position: -264px 0
  }
}