vue实现搜索文字变色
实现搜索文字变色的方法
在Vue中实现搜索文字变色功能，可以通过以下步骤完成：
方法一：使用v-html和正则表达式替换
<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; color: black">${match}</span>`
)
}
}
}
</script>方法二：使用自定义指令
<template>
<div>
<input v-model="searchText" placeholder="输入搜索内容" />
<div v-highlight="searchText">{{ originalText }}</div>
</div>
</template>
<script>
export default {
data() {
return {
originalText: '这是一段需要搜索的文本内容，可以包含多个关键词',
searchText: ''
}
},
directives: {
highlight: {
inserted(el, binding) {
el.innerHTML = el.textContent.replace(
new RegExp(binding.value, 'gi'),
match => `<span style="background-color: yellow">${match}</span>`
)
},
update(el, binding) {
el.innerHTML = el.textContent.replace(
new RegExp(binding.value, 'gi'),
match => `<span style="background-color: yellow">${match}</span>`
)
}
}
}
}
</script>方法三：使用组件封装
创建一个可重用的HighlightText组件：
<template>
<span v-html="processedText"></span>
</template>
<script>
export default {
props: {
text: String,
query: String
},
computed: {
processedText() {
if (!this.query) return this.text
const regex = new RegExp(this.query, 'gi')
return this.text.replace(regex, match =>
`<span style="background-color: yellow">${match}</span>`
)
}
}
}
</script>使用方法：
<template>
<div>
<input v-model="searchText" />
<HighlightText :text="originalText" :query="searchText" />
</div>
</template>注意事项
- 使用v-html时要注意XSS攻击风险，确保内容来源可信
- 对于大量文本的搜索高亮，考虑使用虚拟滚动优化性能
- 可以扩展高亮样式，支持多种颜色和样式配置
- 考虑添加区分大小写的选项，增强搜索灵活性
