标签：emoticon return 前端 ruleStr js 正则 const div lookId

表情包实现

思路：通过全局正则针对文本内容走查，匹配到[嘿哈]文本表情包，通过创建div或者img标签，包裹将文本表情包替换成我们表情包的地址链接。

// 创建文件emoticon.js
import lottie from "lottie-web"; // 动画方法
const lottieWrap = {};

const emoticon = new Map([
  ['[大笑]', {
    name: 'daxiao',
    src: 'https://url-daxiao.json' // 表情包地址
  }]
 ]}

// 根据资源文件生成正则匹配规则
const regExpFn = () => {
  let ruleStr = '';
  emoticon.forEach((val, key) => {
    const text = key.replace(/\[|\]/g, function (w: any): any {
      if (w === '[') {
        return '\\['
      } else if (w === ']') {
        return '\\]'
      }
    })
    ruleStr += text + '|'
  })
  ruleStr = ruleStr.substr(0, ruleStr.length - 1)
  return new RegExp(ruleStr, 'g')
}

// 替换内容里的表情包
const emotiomReplace = (params = {}) => {
  const { content, id } = params
  return content.replace(regExpFn(), (world, index) => {
    const type = world, lookId = id + '-' + index;
    if (lottieWrap[lookId]) return false;
    setTimeout(() => {
      const div = document.getElementById(lookId)
      if (div && !div.innerHTML) {
        const path = emoticon.get(div.getAttribute('type')).src
        lottieWrap[lookId] = lottie.loadAnimation({
          container: div,
          renderer: 'svg',
          loop: true,
          path
        })
      }
    }, 0)
    return `<div style="display: inline-block; width: 20px; height: 20px; 
    margin: 0 1px; vertical-align: middle;" type="${type}" id="${lookId}"></div>`
  })
}

export {
  emotiomReplace
}

使用

import { emotiomReplace } from './emoticon.js'
<span v-html="emotiomReplace(后端数据)"></span>

标签：emoticon,return,前端,ruleStr,js,正则,const,div,lookId
来源： https://blog.csdn.net/weixin_43624724/article/details/120185799

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。