vue模糊查询并且高亮,并且搜索一句话中前后不相连的词也可以搜索到,比如,西安的城墙很大,搜索西,或者西大,都可以搜索出来这句话,举个完整的例子
时间: 2024-01-01 15:05:25 浏览: 72
好的,针对您的问题,可以使用Vue结合正则表达式来实现模糊查询并且高亮。同时,可以使用分词技术来实现搜索一句话中前后不相连的词也可以搜索到的功能。以下是一个完整的例子:
```html
<template>
<div>
<input v-model="keyword" placeholder="请输入搜索关键字">
<ul>
<li v-for="(item, index) in filteredData" :key="index" v-html="highlight(item.text)"></li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '',
data: [
{ text: '西安的城墙很大。' },
{ text: '西安交通大学是一所985高校。' },
{ text: '我喜欢吃西瓜。' },
{ text: '这是一份西式菜谱。' }
]
}
},
computed: {
filteredData() {
const pattern = new RegExp(this.keyword.split(/\s+/).join('.*'), 'gi');
return this.data.filter(item => pattern.test(item.text));
}
},
methods: {
highlight(text) {
const pattern = new RegExp(this.keyword.split(/\s+/).join('|'), 'gi');
return text.replace(pattern, '<span style="color: red">$&</span>');
}
}
}
</script>
```
在上述代码中,我们使用了computed属性来监听关键字的变化,并根据关键字筛选出符合条件的数据。同时,我们还使用了正则表达式和字符串的split方法来实现分词功能,使得搜索一句话中前后不相连的词也可以搜索到。最后,我们使用了v-html指令和highlight方法来将匹配到的关键字进行高亮显示。
希望这个例子可以帮到您!
阅读全文