vue3实现高亮搜索功能

在vue3中我们如果会遇到项目的需求，实现一个高亮效果，那我们如何去实现它呢？ 在vue3中的template渲染中，我们会借用v-html指令去渲染它

调用highLightText方法，其中hightLightText方法如下：

const hightLightText = (val: string) =>{
    // 其中searchKeyWord为你要搜索的值，可以是ref中定义的，比如let searchKeyWord = ref("")
const reg = new RegExp(searchKeyWord.value, 'gi') // 用new 调用正则是方便用变量的形式去控制
// $&返回匹配到的原值
    return val.replace(
      reg,
      `<span style="background: 'orange';color: #000">$&</span>`
    )
}

这样就可以实现一个高亮的效果：