vue中,如何实现给搜索出来的内容,单独的文字加上高亮,如下图所示
8条回答 默认 最新
- dahe0825 2023-03-10 11:33关注
参考GPT的回答和自己的思路,vue中,如何实现这个搜索出来的的内容加上高亮代码如下所示:
<template> <div> <input v-model="keyword" placeholder="搜索..."> <ul> <li v-for="item in searchResult" :key="item.id"> <span v-html="highlightKeyword(item.title)"></span> </li> </ul> </div> </template> <script> export default { data() { return { keyword: '', items: [ { id: 1, title: 'Vue.js is a progressive JavaScript framework' }, { id: 2, title: 'Vue.js makes building complex web applications a breeze' }, { id: 3, title: 'Vue.js is easy to learn and use' } ] } }, computed: { searchResult() { if (!this.keyword) { return this.items } const pattern = new RegExp(this.keyword, 'gi') return this.items.filter(item => item.title.match(pattern)) } }, methods: { highlightKeyword(title) { if (!this.keyword) { return title } const pattern = new RegExp(this.keyword, 'gi') const matched = title.match(pattern) if (!matched) { return title } const highlighted = title.replace(pattern, `<span class="highlight">${matched[0]}</span>`) return highlighted } } } </script> <style> .highlight { background-color: yellow; color: black; } </style>
以下是实现代码的完整思路,可以帮助您理解,
1.首先,在模板中定义一个用于展示搜索结果的列表:<ul> <li v-for="item in searchResult" :key="item.id"> <span v-html="highlightKeyword(item.title)"></span> </li> </ul>
2.在Vue实例中定义一个方法highlightKeyword,该方法接收一个字符串参数,用于将关键字高亮显示。该方法的实现如下:
methods: { highlightKeyword(title) { if (!this.keyword) { return title } const pattern = new RegExp(this.keyword, 'gi') const matched = title.match(pattern) if (!matched) { return title } const highlighted = title.replace(pattern, `<span class="highlight">${matched[0]}</span>`) return highlighted } }
在上述代码中,首先判断keyword是否存在,如果不存在则返回原始字符串title。如果keyword存在,则使用正则表达式创建一个不区分大小写的匹配模式,然后在title中查找匹配的关键字,并将其用标签包裹起来,同时为该标签添加highlight类,以便后续可以在样式表中为它设置高亮效果。
3.最后,在样式表中定义highlight类的样式,用于将高亮文本呈现为黄色背景、黑色文字:
.highlight { background-color: yellow; color: black; }
回答不易,还请采纳!!!
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 GDI处理通道视频时总是带有白色锯齿
- ¥20 用雷电模拟器安装百达屋apk一直闪退
- ¥15 算能科技20240506咨询(拒绝大模型回答)
- ¥15 自适应 AR 模型 参数估计Matlab程序
- ¥100 角动量包络面如何用MATLAB绘制
- ¥15 merge函数占用内存过大
- ¥15 Revit2020下载问题
- ¥15 使用EMD去噪处理RML2016数据集时候的原理
- ¥15 神经网络预测均方误差很小 但是图像上看着差别太大
- ¥15 单片机无法进入HAL_TIM_PWM_PulseFinishedCallback回调函数