当前位置：首页 > VUE

vue实现搜索变色

2026-03-29 16:08:08VUE

实现搜索高亮的基本思路

在Vue中实现搜索关键词高亮，核心逻辑是通过正则表达式匹配文本中的关键词，将其替换为带有高亮样式的HTML元素。以下是具体实现方法：

方法一：使用过滤器或计算属性

创建一个高亮过滤器或计算属性来处理文本：

// 在Vue组件中
methods: {
  highlightText(text, keyword) {
    if (!keyword) return text
    const regex = new RegExp(keyword, 'gi')
    return text.replace(regex, match => `<span class="highlight">${match}</span>`)
  }
}

.highlight {
  background-color: yellow;
  color: black;
}

使用v-html指令渲染处理后的文本：

vue实现搜索变色

<div v-html="highlightText(content, searchKeyword)"></div>

方法二：使用自定义指令

创建全局高亮指令：

Vue.directive('highlight', {
  inserted(el, binding) {
    const keyword = binding.value
    if (!keyword) return

    const text = el.textContent
    const regex = new RegExp(keyword, 'gi')
    el.innerHTML = text.replace(regex, match => 
      `<span style="background-color: yellow">${match}</span>`
    )
  },
  update(el, binding) {
    const keyword = binding.value
    if (!keyword) {
      el.innerHTML = el.textContent
      return
    }

    const text = el.textContent
    const regex = new RegExp(keyword, 'gi')
    el.innerHTML = text.replace(regex, match => 
      `<span style="background-color: yellow">${match}</span>`
    )
  }
})

使用指令：

vue实现搜索变色

<div v-highlight="searchKeyword">{{ content }}</div>

方法三：使用组件封装

创建可复用的高亮组件：

Vue.component('highlight-text', {
  props: ['text', 'keyword'],
  render(h) {
    if (!this.keyword) return h('span', this.text)

    const regex = new RegExp(this.keyword, 'gi')
    const nodes = []
    let lastIndex = 0
    let match

    while ((match = regex.exec(this.text)) !== null) {
      if (match.index > lastIndex) {
        nodes.push(this.text.slice(lastIndex, match.index))
      }
      nodes.push(h('span', { class: 'highlight' }, match[0]))
      lastIndex = match.index + match[0].length
    }

    if (lastIndex < this.text.length) {
      nodes.push(this.text.slice(lastIndex))
    }

    return h('span', nodes)
  }
})

使用组件：

<highlight-text :text="content" :keyword="searchKeyword" />

注意事项

使用v-html时要注意XSS攻击风险，确保内容可信或进行转义处理
对于大量文本的高亮操作，考虑性能优化，如防抖处理
复杂匹配场景可能需要更完善的正则表达式处理
如果需要区分大小写，移除正则表达式中的'i'标志

扩展功能

实现多关键词高亮：

highlightMulti(text, keywords) {
  if (!keywords.length) return text

  let result = text
  keywords.forEach(keyword => {
    const regex = new RegExp(keyword, 'gi')
    result = result.replace(regex, match => `<span class="highlight">${match}</span>`)
  })

  return result
}

以上方法提供了Vue中实现搜索高亮的多种方案，可根据项目需求选择最适合的实现方式。

标签: vue