uni-app中replace搜索词高亮常失效，因未转义正则元字符、缺gi标志致仅首匹配或大小写不匹配，且replaceAll在旧WebView不可用；应先escapeRegExp转义关键词，再用new RegExp(escaped,'gi')配合replace实现安全高亮。
uni-app 中用 replace 做搜索词高亮为什么常失效？
因为直接写 text.replace(keyword, `<span class="highlight">${keyword}</span>`) 只能替换第一个匹配项，且大小写、特殊字符（如 .?*）会破坏正则逻辑，导致高亮错位或报错。
- 关键词含
.、+、(等时，会被正则当成元字符，必须先转义 - 不加
g标志 → 只高亮首个匹配；不加i→ 大小写敏感，用户搜 “Apple” 就匹配不到 “apple” - 在 H5 或低端安卓 WebView（如小米旧机型）中，
replaceAll不可用，强行使用会导致渲染空白
安全可靠的高亮替换写法（兼容所有 uni-app 平台）
核心是：把关键词转义成纯字面量，再构造带 gi 标志的正则表达式。不能依赖 replaceAll，必须用 replace + 正则。
- 先封装一个转义函数：
function escapeRegExp(string) { return string.replace(/[.*+?^${}()|[]\]/g, '\$&'); } - 再组合高亮逻辑：
const escaped = escapeRegExp(searchWord); const regex = new RegExp(escaped, 'gi'); text.replace(regex, '<span class="highlight">$&</span>'); - 注意：
$&表示整个匹配内容，自动保留原始大小写，比手动拼字符串更安全
在 v-html 或富文本里高亮要额外防 XSS
如果 text 是后端返回的 HTML 片段（比如含 <p>、<img>），直接 replace 可能误改标签属性或破坏结构。
- 优先用
mp-html插件（支持自定义高亮插件钩子），避免手撕 HTML 字符串 - 若必须原生处理，先用正则避开 HTML 标签：
/>([^ 提取文本节点再高亮，但复杂度陡增 - 永远不要把用户输入的
searchWord直接拼进v-html—— 即使转义了正则，也要用v-text渲染非信任内容
样式和性能容易被忽略的细节
highlight 类名生效的前提是 CSS 真的加载了，而 uni-app 的 scoped style 在某些平台（如微信小程序）对 v-html 内容无效。
- 高亮样式必须写在
<style>的全局作用域下，或用class="highlight"配合外联 CSS 文件 - 长文本（>1000 字）高频触发高亮（如实时搜索）会造成卡顿，建议加防抖：
onInput中节流，或只在失焦后执行 - iOS 微信 WebView 对
span行内样式兼容性差，高亮背景色建议用background-color而非box-shadow
