Vue.js中搜索高亮应通过computed封装匹配与分段逻辑，用RegExp动态构造正则遍历匹配位置并拼接<mark>标签，返回新对象数组供v-html安全渲染，兼顾XSS防护与性能优化。

Vue.js 中用 computed 实现搜索高亮，核心是：对原始数据做动态过滤 + 关键词匹配 + HTML 片段生成。但直接在模板里拼接 v-html 容易出安全问题或逻辑混乱，推荐把“匹配+高亮”逻辑抽成可复用的计算属性或方法。

关键词匹配与分段高亮

高亮不是简单替换字符串，而是把文本按关键词拆成若干段（匹配前、匹配中、匹配后），再给匹配部分包裹 <mark> 标签。需注意大小写处理、全字匹配（可选）、多关键词支持。

• 用 RegExp 构造动态正则，开启 g 和 i 标志实现全局、不区分大小写匹配
• 对每个待高亮字段调用 String.prototype.replaceAll()（或 split + join）不安全，应使用 matchAll 或正则 exec 遍历所有匹配位置，再用 slice 拼接带标签的片段
• 若搜索词为空，直接返回原文本，避免正则报错或渲染异常

封装为可复用的 computed getter

在组件内定义一个计算属性，接收原始列表和当前搜索关键词，返回已高亮处理后的数组（每项含原始数据 + 高亮后的 title/description 字段）。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 不要在 computed 内直接修改原始数据对象，应返回新对象数组，保持响应式纯净
• 高亮字段建议单独存为 highlightedTitle 等只读字段，模板中用 v-html="item.highlightedTitle" 渲染
• 可配合 watch 或 computed 依赖自动更新，无需手动触发

防 XSS 与文本转义边界处理

高亮内容最终要通过 v-html 插入 DOM，必须确保仅高亮标签可控，原始文本已做过基础转义（如将 < 转为 ），否则用户输入 <code><script> 会执行。

立即学习“前端免费学习笔记（深入）”；

• 推荐在高亮前先对原始文本做一次 HTML 实体编码（可用 DOMPurify.sanitize() 或轻量函数）
• <mark> 是安全内联标签，但不要允许用户控制 class 名或插入 style 属性
• 如果原始字段本身含 HTML（如富文本），应先剥离标签再高亮，或限定只高亮纯文本字段

支持模糊匹配与性能优化

当列表很大（>500 条）或关键词频繁变化时，每次 computed 重算可能卡顿。

• 用 lodash.debounce 节流搜索输入，避免高频触发 computed 重新求值
• 对长文本做高亮前加长度判断（如只处理前 200 字），避免正则回溯爆炸
• 考虑用 shouldUpdate 或 memoize 缓存结果，关键词和数据未变时不重复高亮

关键不在怎么写正则，而在让高亮逻辑与业务数据解耦、安全可控、响应及时——computed 是入口，封装才是重点。