代码如下:
<template>
<button @click="highLight">点击高亮替换</button>
<div style="margin-top: 20px">原始数据</div>
<div >{
{originData}}</div>
<div style="margin-top: 20px">替换后的数据</div>
<div v-if="searchResult" v-html="searchResult"></div>
</template>
<script setup>
import {
reactive, ref} from "vue";
const highLightFont = ref('jjw')
const highLightData = ref('<span style="color: red" class="active">'+highLightFont.value+'</span>')
const searchResult = ref('')
const originData = ref('jjw你好啊,Jjw咋样呀,JJw可别压力太大了')
const highLight = ()=>{
const re = new RegExp(highLightFont.value, 'gi')
searchResult.value = originData.value.replace(re, highLightData.value)
}
</script>
<style scoped lang="less">
:deep(.active){
color: red;
}
</style>
显示结果如下: