vue 3 中过滤器已被移除，需用 javascript 字符串处理 + v-html 实现搜索高亮；应封装 highlighttext 函数，对用户输入关键词转义后构造正则（加 g、i 标志），替换为带 class="highlight" 的 span，并配合 css 样式渲染，避免模板内写复杂逻辑。
Vue 3 模板中不能直接使用 Vue 2 风格的过滤器（| filterName），因为过滤器已被移除。要实现搜索关键字高亮，需结合 JavaScript 字符串处理 + v-html 渲染，或封装为计算属性/函数，在模板中调用。
用 computed 或方法动态生成高亮 HTML 字符串
核心是把原始文本中的关键词替换成带 <span class="highlight"></span> 的 HTML 片段，再用 v-html 渲染：
- 定义一个工具函数（如
brightenKeyword），接收原文本和搜索词，返回含<span></span>的字符串 - 注意：必须用正则表达式并加
g标志，否则只替换第一个匹配项 - 为防 XSS，若搜索词来自用户输入，建议先对关键词做
escapeRegExp处理（转义特殊正则字符如.、*、(等）
在模板中安全使用 v-html 渲染高亮内容
示例写法：
<div v-for="item in filteredList" :key="item.id"> <span v-html="highlightText(item.title, searchText)"></span> </div>
对应脚本中定义：
const highlightText = (text, keyword) => {
if (!keyword || !text) return text
const escaped = keyword.replace(/[.*+?^${}()|[]\]/g, '\$&')
const reg = new RegExp(escaped, 'gi')
return text.replace(reg, '<span class="highlight">$&</span>')
}
⚠️ 注意：v-html 会直接解析 HTML，务必确保内容可信；若文本含用户提交内容，应额外做 HTML 实体转义或使用 DOMPurify 等库净化。
避免在模板中直接写复杂逻辑
不推荐在模板中写 v-html="item.title.replace(...)" 这类长表达式，既难读又不可复用。应提取为：
- 组件内的
function方法（配合ref或computed） - 或抽成独立的
composable（如useHighlight），便于多处复用 - 若列表数据量大，可考虑缓存高亮结果，避免重复计算
样式控制高亮效果
添加 CSS 类即可控制视觉效果：
.highlight {
background-color: #ffec3d;
font-weight: 600;
border-radius: 2px;
padding: 0 4px;
}
支持大小写不敏感匹配（正则加 i 标志），也兼容中文、英文、数字混合关键词。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
