前端js实现正则表情包内容替换

快来打我* 2022-09-10 13:20 247阅读 0赞

###### 表情包实现 ######

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

// 创建文件emoticon.js
    import lottie from "lottie-web"; // 动画方法
    
    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 lottieWrap = { };
      const {  content, id } = params
      const result = content.replace(regExpFn(), (world, index) => { 
        const type = world, lookId = id + '-' + index;
        if (lottieWrap[lookId]) return false;
          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
            })
          }
        return `<div style="display: inline-block; width: 20px; height: 20px; margin: 0 1px; vertical-align: middle;" type="${ type}" id="${ lookId}"></div>`
      })
      return result;
    }
    
    export { 
      emotiomReplace
    }

##### 使用 #####

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