vue.js中搜索高亮应通过computed封装匹配与分段逻辑，用regexp动态构造正则遍历匹配位置并拼接标签，返回新对象数组供v-html安全渲染，兼顾xss防护与性能优化。
Vue.js 中用 computed 实现搜索高亮，核心是：对原始数据做动态过滤 + 关键词匹配 + HTML 片段生成。但直接在模板里拼接 v-html 容易出安全问题或逻辑混乱，推荐把“匹配+高亮”逻辑抽成可复用的计算属性或方法。
关键词匹配与分段高亮
高亮不是简单替换字符串，而是把文本按关键词拆成若干段（匹配前、匹配中、匹配后），再给匹配部分包裹 <mark></mark> 标签。需注意大小写处理、全字匹配（可选）、多关键词支持。
- 用
RegExp构造动态正则，开启g和i标志实现全局、不区分大小写匹配 - 对每个待高亮字段调用
String.prototype.replaceAll()（或split + join）不安全，应使用matchAll或正则exec遍历所有匹配位置，再用slice拼接带标签的片段 - 若搜索词为空，直接返回原文本，避免正则报错或渲染异常
封装为可复用的 computed getter
在组件内定义一个计算属性，接收原始列表和当前搜索关键词，返回已高亮处理后的数组（每项含原始数据 + 高亮后的 title/description 字段）。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章