计算属性配合正则实现关键词高亮教程

本文详解如何利用 Vue 的计算属性与正则表达式安全、高效地实现关键词高亮功能，强调“匹配逻辑”与“渲染准备”的彻底解耦：通过动态构造带`g`和`i`标志的正则、空关键词防护、`replace`回调精准包裹、返回全新数组避免副作用，并严格限定`v-html`仅用于经计算属性生成且已转义的可信字段（如`highlightedTitle`），同时规避常见陷阱如直接调用方法、`split+join`误用、特殊字符未转义等，兼顾响应式纯净性、性能（节流+自动缓存）与 XSS 防护。

计算属性配合正则实现关键词高亮，核心是把“匹配逻辑”和“渲染准备”解耦到响应式系统中——不直接操作 DOM，也不在模板里拼 HTML，而是让 computed 返回已处理好的、带 标签的安全片段。

用 computed 封装高亮函数

把高亮逻辑写成一个可复用的计算属性 getter，接收原始数据和搜索词，返回新数组。每项包含原始字段（如 title）和新增的 highlightedTitle 字段：

• 正则必须动态构造：new RegExp(keyword, 'gi')，g 确保全局替换，i 忽略大小写
• keyword 为空时提前 return 原文本，避免 RegExp('','gi') 报错
• 用 String.prototype.replace() 的函数式回调，确保只包裹匹配内容，不破坏原始结构
• 返回新对象数组，不修改原始 data，保持响应式纯净

模板中安全使用 v-html

高亮后的字段只能通过 v-html 渲染，但必须限制可控范围：

• 只对明确来自 highlightTitle 这类计算字段使用 v-html="item.highlightedTitle"
• 原始文本若含用户输入，需先做 HTML 实体转义（如 < 替换 ），再高亮，防 XSS
• 标签本身安全，但禁止让用户控制 class 名、style 属性或插入任意 HTML
• 若原始字段是富文本（如含 ），应先用 textContent 或 DOMPurify 剥离标签，再对纯文本高亮

支持多字段与模糊场景

实际搜索常涉及标题、描述、作者等多个字段，且需兼顾性能：

• 对每个需高亮字段单独调用高亮逻辑，生成 highlightedTitle、highlightedDesc 等只读字段
• 长文本（如 >200 字）可截断后再高亮，避免正则回溯卡顿
• 列表量大时，配合 lodash.debounce 节流输入，减少 computed 频繁重算
• 关键词未变、原始数据未变时，computed 自动缓存结果，无需额外 memoize

避免常见坑点

看似简单，但几个细节不注意就出问题：

• 别在 v-html 中直接调用方法（如 v-html="highlight(item.title, key)"），会绕过响应式追踪，且每次渲染都执行
• 不要用 split + join 替代正则 replace，无法处理重叠匹配或特殊字符（如 +、.）
• 正则中的特殊字符（如 ( ) [ ] . * + ?）需先转义，否则报错或误匹配；可用 keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
• 不区分大小写匹配时，replace 回调里的 match 是原文本大小写，不是 keyword 的大小写，直接包裹即可

今天关于《计算属性配合正则实现关键词高亮教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！