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>高级功能扩展
实现区分大小写的查找功能：
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
}
}
}注意事项
- 使用v-html时要注意XSS攻击风险，确保内容可信
- 复杂查找需求可考虑使用第三方库如Fuse.js
- 移动端需优化输入体验，考虑添加虚拟键盘搜索按钮
