vue项目中表情[文字]替换成图片

vue项目中表情[文字]替换成图片

例如

<p>{{text}}p>

data(){
	text:'拜拜[再见]'
}

将
替换成

思路：写一个方法把text中“[表情]”的文字转成img标签并将src属性等于本地该表情图片的路径，用v-html解析html标签来展示
难点：
1、如果用本地表情图片的地址是否引用正确,避免打包后找不到图片路径，不用本地图片可以先上传图片直接用图片地址或者转成base64格式
2、如果用正则表达式"["和“】”前面要加两个反斜杠，防止被转译

1、js写表情替换方法

vue2+js

export function emojiReplace (text) {
  const emojiArr = [
    { title: '[微笑]', url: require('@/assets/emoji/smile.png') },
    { title: '[再见]', url: require('@/assets/emoji/goodbye.png') },
    //{ title: '\\[再见\\]', url: require('@/assets/emoji/goodbye.png') },//正则表达式
  ]
  emojiArr.forEach(item => {
    if (text) {
      text = text.replaceAll(item.title, `${item.url} />`)
     //正则表达式
     // text = text.replace(new RegExp(item.title, 'g'), ``)
    }
  })
  return text
}
    

vue3+ts

import goodbye from '@/assets/emoji/goodbye.png'
import smile from '@/assets/emoji/smile.png'
export function emojiReplace(text: string) {
  const emojiArr: Array<{ title: string; url: any }> = [
    { title: '[再见]', url: goodbye },
    //{ title: '\\[再见\\]', url: goodbye },//正则表达式
    { title: '[微笑]', url: smile },
  ]
  emojiArr.forEach(item => {
    if (text) {
    text = text.replaceAll(item.title, `${item.url} />`)
    //正则表达式
    // text = text.replace(new RegExp(item.title, 'g'), ``)
    }
  })
  return text
}

2、引用该方法

<p v-html="emojiReplace(text)">p>

vue2+js

import { emojiReplace } from '@/utils/emojiReplace.js'
methods:{
    emojiReplace,
}

vue3+ts

import { emojiReplace } from '@/utils/emojiReplace.js'

3、在全局样式加表情样式

.emojiImg{
  width:21.3px;
  height:21.3px
}

或者直接加载方法中img标签里

注意：replaceAll兼容性不是很好，建议用正则