vue表情包渲染,trie算法实现，表情包资源分享

表情包图片资源

https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/blog/files/emoticon.zip

data.json

    {
    "[微笑]": "enjoy1",
    "[撇嘴]": "enjoy2",
    "[色]": "enjoy3",
    "[发呆]": "enjoy4",
    "[得意]": "enjoy5",
    "[流泪]": "enjoy6",
    "[害羞]": "enjoy7",
    "[闭嘴]": "enjoy8",
    "[睡]": "enjoy9",
    "[大哭]": "enjoy10",
    "[尴尬]": "enjoy11",
    "[发怒]": "enjoy12",
    "[调皮]": "enjoy13",
    "[呲牙]": "enjoy14",
    "[惊讶]": "enjoy15",
    "[难过]": "enjoy16",
    "[囧]": "enjoy17",
    "[抓狂]": "enjoy18",
    "[吐]": "enjoy19",
    "[偷笑]": "enjoy20",
    "[愉快]": "enjoy21",
    "[白眼]": "enjoy22",
    "[傲慢]": "enjoy23",
    "[困]": "enjoy24",
    "[惊恐]": "enjoy25",
    "[流汗]": "enjoy26",
    "[憨笑]": "enjoy27",
    "[悠闲]": "enjoy28",
    "[奋斗]": "enjoy29",
    "[咒骂]": "enjoy30",
    "[疑问]": "enjoy31",
    "[嘘]": "enjoy32",
    "[晕]": "enjoy33",
    "[衰]": "enjoy34",
    "[骷髅]": "enjoy35",
    "[敲打]": "enjoy36",
    "[再见]": "enjoy37",
    "[擦汗]": "enjoy38",
    "[抠鼻]": "enjoy39",
    "[鼓掌]": "enjoy40",
    "[坏笑]": "enjoy41",
    "[左哼哼]": "enjoy42",
    "[右哼哼]": "enjoy43",
    "[哈欠]": "enjoy44",
    "[鄙视]": "enjoy45",
    "[委屈]": "enjoy46",
    "[快哭了]": "enjoy47",
    "[阴险]": "enjoy48",
    "[亲亲]": "enjoy49",
    "[可怜]": "enjoy50",
    "[菜刀]": "enjoy51",
    "[西瓜]": "enjoy52",
    "[啤酒]": "enjoy53",
    "[篮球]": "enjoy54",
    "[乒乓]": "enjoy55",
    "[咖啡]": "enjoy56",
    "[饭]": "enjoy57",
    "[猪头]": "enjoy58",
    "[玫瑰]": "enjoy59",
    "[凋谢]": "enjoy60",
    "[嘴唇]": "enjoy61",
    "[爱心]": "enjoy62",
    "[心碎]": "enjoy63",
    "[蛋糕]": "enjoy64",
    "[闪电]": "enjoy65",
    "[炸弹]": "enjoy66",
    "[刀]": "enjoy67",
    "[足球]": "enjoy68",
    "[瓢虫]": "enjoy69",
    "[便便]": "enjoy70",
    "[月亮]": "enjoy71",
    "[太阳]": "enjoy72",
    "[礼物]": "enjoy73",
    "[拥抱]": "enjoy74",
    "[强]": "enjoy75",
    "[弱]": "enjoy76",
    "[握手]": "enjoy77",
    "[胜利]": "enjoy78",
    "[抱拳]": "enjoy79",
    "[勾引]": "enjoy80",
    "[拳头]": "enjoy81",
    "[差劲]": "enjoy82",
    "[NO]": "enjoy84",
    "[OK]": "enjoy85",
    "[爱情]": "enjoy86",
    "[飞吻]": "enjoy87",
    "[跳跳]": "enjoy88",
    "[发抖]": "enjoy89",
    "[怄火]": "enjoy90",
    "[转圈]": "enjoy91",
    "[磕头]": "enjoy92",
    "[回头]": "enjoy93",
    "[嘿哈]": "enjoy94",
    "[奸笑]": "enjoy95",
    "[捂脸]": "enjoy96",
    "[机智]": "enjoy97"
    }

trie.js 核心算法

function Trie(){
  this.words = 0;
  this.empty = 1;
  this.index = 0;
  this.children = {};
}
Trie.prototype = {
  insert: function(str, pos = 0, idx){
    if(str.length === 0) {
      return;
    }
    let k;
    let child;
    if(pos === str.length) {
      this.index = idx;
      return;
    }
    k = str[pos];
    if(this.children[k] === undefined){
      this.children[k] = new Trie();
      this.empty = 0;
      this.children[k].words = this.words + 1;
    }
    child = this.children[k];
    child.insert(str, pos + 1, idx);
  },
  build: function(arr){
    let len = arr.length;
    for(let i = 0; i ';
    str = splice(str, pos, emotion.length, img);
  });
  return str;
}
if(typeof module !== 'undefined'){
  emotionMap = require('./data.json');
  Trie = require('./trie');
  build();
  module.exports = qqWechatEmotionParser;
} else if(window !== 'undefined'){
  emotionMap = window._qqWechatEmotionParser.emotion_map;
  Trie = window._qqWechatEmotionParser.Trie;
  build();
  window.qqWechatEmotionParser = qqWechatEmotionParser;
}

测试

import qqWechatEmotionParser from './utils/enjoyAnalysis/index'
let content = qqWechatEmotionParser('[害羞]亲亲您好[玫瑰][玫瑰]')

tip: 如直接对接到微信，消息发送至微信客户端，则无需转换成图片，直接以[玫瑰][笑哭]的形式发送，微信会自动解析 测试结果

亲亲您好

亲亲您好

vue页面显示所有表情包供选择

  
    
      
        
      
    
  



export default {
  name: 'index',
  data () {
    return {
      enjoyData: require('../../../utils/enjoyAnalysis/data.json')
    }
  },
  methods:{
    onChoiceEnjoy(index){
      this.$emit('onChoiceEnjoy', index)
    }
  }
}



  .enjoy_panel{
    width:100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    &>.enjoy_list{
      display: grid;
      grid-template-columns: repeat(8,12.5%);
      justify-items: center;
      &>div{
        padding: 2px 0;
        &:active{
          opacity: 0.8;
        }
      }
    }
  }

最终结果不宜直接放入v-html，因为不会过滤标签，如需过滤自信写正则去除标签

其实还可以用文件名代替表情名称

以上思路来自qq-wechat-emotion-parser插件，改版实现