vue实现文字搜索并高亮

​
在vue中实现搜索关键字高亮，可以通过自定义指令来完成。

一、实现步骤：

1. 获取用户输入的搜索关键字
2. 创建一个全局自定义指令，该指令接受一个值，通常是用户搜索的关键字
3. 在指令的bind钩子中，我们使用正则表达式匹配关键字
4. 将匹配到的文本用span标签和自定义的类名进行包裹替换展示，更新匹配的文本，从而达到高亮的效果。

结果展示：

二、代码展示
1.封装自定义指令

import { DirectiveBinding } from 'vue'

const highlightPlugin = {
  mounted(el: HTMLElement, binding: DirectiveBinding<string | string[]>) {
    highlightText(el, binding.value)
  },
  updated(el: HTMLElement, binding: DirectiveBinding<string | string[]>) {
    if (binding.value !== binding.oldValue) {
      highlightText(el, binding.value)
    }
  }
}

const highlightText = (el: HTMLElement, search: string | string[]) => {
  // 清空之前的高亮
  el.innerHTML = el.innerHTML.replace(
    /<span class="highlight".*?<\/span>/g,
    (match) => match.replace(/<span class="highlight".*?>|<\/span>/g, '')
  )
  if (search.length) {
    const keywords = Array.isArray(search) ? search : [search]
    let regex = keywords.map((keyword) => `(${keyword})`).join('|')
    const regExp = new RegExp(regex, 'gi')
    el.innerHTML = el.innerHTML.replace(regExp, (match) => {
      return `<span class="highlight" style="color: #F0672D">${match}</span>`
    })
  }
}

export default highlightPlugin

2.在main.js 中使用

import directives from '@/directives/index.ts'
const app = createApp(App)
app.use(directives)

3.在页面中使用

<a-tag class="project-item" color="#DDE6FF" v-highlight="keywords">
   {{ item.type }}
</a-tag>

// 获取输入框中的关键词
const keywords = computed(() =>
  Array.from(
    new Set(
      props.searchInput
        .split('、')
        .map((word) => word.trim())
        .filter(Boolean)
    )
  )
)

​