Vue中实现搜索内容关键词高亮场景

最近在维护数据推荐后台管理系统的时候，舍友在后端新增了几个接口给我提了个新的需求：构建一个新的页面，可以对数据进行综合查询，还给了我一个示例图：

点击不同的选项可以进行分类查询，大体的功能基本都没什么难度，但是这个对搜索出来的关键词进行高亮标记的场景我是第一次接触，而且一时半会也想不出该怎么实现，后来ChatGPT给了我一点启发：大体思路就是记录下搜索框中的关键词及从后端请求回来的数据，将关键词与请求回来的数据进行匹配，如果遇到与关键词相同的内容，则用被高亮标记后的span标签进行关键词替换，最终用v-html指令将数据渲染到页面上，具体实现代码如下：

<div class="itemText">
    <!-- 使用 v-html 指令对替换好的内容进行渲染 -->
    <span class="itemName" v-html="getHighlightText(item.name)"></span>
    <span class="itemMaterial">{{ item.description }}</span>
</div>

methods: {
    getHighlightText(text) {
      const keyword = this.searchForm.searchText // 搜索框中的关键词
      return text.replace(new RegExp(keyword, 'g'), `<span style="color: green;">${keyword}</span>`) // 进行关键词替换
    }
}

最终实现效果如下：