js 转企业微信表情

js 转企业微信表情

思路：根据固定的微信表情对照表和精灵图 使用背景图片的方式显示 两者间有一定的规律

// 微信表情对照表
const emojiTxtArr = ‘[微笑][撇嘴][色][发呆][得意][流泪][害羞][闭嘴][睡][大哭][尴尬][发怒][调皮][呲牙][惊讶][难过][囧][抓狂][吐][偷笑][愉快][白眼][傲慢][困][惊恐][憨笑][悠闲][咒骂][疑问][嘘][晕][衰][骷髅][敲打][再见][擦汗][抠鼻][鼓掌][坏笑][右哼哼][鄙视][委屈][快哭了][阴险][亲亲][可怜][笑脸][生病][脸红][破涕为笑][恐惧][失望][无语][嘿哈][捂脸][奸笑][机智][皱眉][耶][吃瓜][加油][汗][天啊][Emm][社会社会][旺柴][好的][打脸][哇][翻白眼][666][让我看看][叹气][苦涩][裂开][嘴唇][爱心][心碎][拥抱][强][弱][握手][胜利][抱拳][勾引][拳头][OK][合十][啤酒][咖啡][蛋糕][玫瑰][凋谢][菜刀][炸弹][便便][月亮][太阳][庆祝][礼物][红包][福][烟花][爆竹][猪头][跳跳][发抖][转圈]’.split(‘][’)
精灵图

方法

import emoji from '@/assets/imgs/weixintu.png'
// 微信表情对照表
const emojiTxtArr = '[微笑][撇嘴][色][发呆][得意][流泪][害羞][闭嘴][睡][大哭][尴尬][发怒][调皮][呲牙][惊讶][难过][囧][抓狂][吐][偷笑][愉快][白眼][傲慢][困][惊恐][憨笑][悠闲][咒骂][疑问][嘘][晕][衰][骷髅][敲打][再见][擦汗][抠鼻][鼓掌][坏笑][右哼哼][鄙视][委屈][快哭了][阴险][亲亲][可怜][笑脸][生病][脸红][破涕为笑][恐惧][失望][无语][嘿哈][捂脸][奸笑][机智][皱眉][耶][吃瓜][加油][汗][天啊][Emm][社会社会][旺柴][好的][打脸][哇][翻白眼][666][让我看看][叹气][苦涩][裂开][嘴唇][爱心][心碎][拥抱][强][弱][握手][胜利][抱拳][勾引][拳头][OK][合十][啤酒][咖啡][蛋糕][玫瑰][凋谢][菜刀][炸弹][便便][月亮][太阳][庆祝][礼物][红包][福][烟花][爆竹][猪头][跳跳][发抖][转圈]'.split('][')
// 遍历后得到的表情对照数组
const emojiList = emojiTxtArr.map((item, index) => {
  if (index === 0) {
    return item + ']'
  } else if (index === emojiTxtArr.length - 1) {
    return '[' + item
  } else {
    return '[' + item + ']'
  }
})


methods:{
	// 处理文字换行和微信表情
    initTxt(txt) {
      let TXT = txt.replaceAll('\n', '<br/>')
      emojiList.forEach((item, index) => {
        const style = `background-image: url(${emoji});display: inline-block;vertical-align: -5px;background-position: -${(31 + 84 * (index % 9))}px -${(31 + 90 * Math.floor(index / 9))}px;width: 50px;height: 50px;margin:-15px;transform: scale(0.4);`
        TXT = TXT.replaceAll(item, `<div style="${style}"></div>`)
      })
      return TXT
    },
}


//使用
<!-- <div class="f14" v-html="initTxt('你是一个小可爱[愉快]')"> </div>
        <div v-html="initTxt('你是一个小可爱[流泪]')"> </div>
        <div v-html="initTxt('你是一个小可爱[大哭]')"> </div> -->