当前位置：首页 > VUE

vue实现文本查找功能

2026-01-21 09:08:06VUE

实现文本查找功能的基本思路

在Vue中实现文本查找功能，通常需要监听用户输入的关键词，并在目标文本中进行匹配和突出显示。可以通过计算属性或方法来处理文本匹配逻辑。

vue实现文本查找功能

核心代码实现

<template>
  <div>
    <input v-model="searchText" placeholder="输入查找内容" />
    <div v-html="highlightedText"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalText: '这里是要查找的原始文本内容',
      searchText: ''
    }
  },
  computed: {
    highlightedText() {
      if (!this.searchText) return this.originalText
      const regex = new RegExp(this.searchText, 'gi')
      return this.originalText.replace(regex, match => 
        `<span style="background-color: yellow">${match}</span>`
      )
    }
  }
}
</script>

高级功能扩展

实现区分大小写的查找功能：

vue实现文本查找功能

highlightedText() {
  if (!this.searchText) return this.originalText
  const regex = new RegExp(this.searchText, 'g')
  return this.originalText.replace(regex, match => 
    `<span class="highlight">${match}</span>`
  )
}

添加CSS样式增强视觉效果：

.highlight {
  background-color: yellow;
  font-weight: bold;
  color: #333;
}

性能优化建议

对于大段文本内容，可以考虑以下优化措施：

使用debounce技术减少实时搜索的频率
将文本分割成小块进行分批处理
使用Web Worker在后台线程执行查找操作

import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchText: '',
      debouncedSearch: ''
    }
  },
  created() {
    this.debouncedUpdateSearch = debounce(function() {
      this.debouncedSearch = this.searchText
    }, 300)
  },
  watch: {
    searchText() {
      this.debouncedUpdateSearch()
    }
  },
  computed: {
    highlightedText() {
      // 使用debouncedSearch替代searchText
    }
  }
}