必须转义关键词特殊字符再构造正则，加g和i标志；空关键词需守卫；v-html渲染前用encodeURIComponent编码、绑定前decodeURIComponent解码；iOS样式失效优先检查rpx缩放及class替代内联样式。
搜索关键词必须转义后再构造正则
直接用 new RegExp(keyword, 'gi') 会炸——用户输个 .、+、( 就触发正则语法错误，或意外匹配整段文本。真实接口里，用户搜“C++入门”“100%正确”太常见了。
必须先清理特殊字符：escapeRegExp(keyword) 函数要写死在工具方法里：
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[]\]/g, '\$&');
}
再拼正则：const regex = new RegExp(escapeRegExp(keyword), 'gi')
- 不加
g标志？只高亮第一个词，后面全忽略 - 不加
i标志？用户搜“iphone”，“iPhone”“IPHONE”全不中 - keyword 为空字符串或纯空格时，必须守卫：
if (!keyword?.trim()) return text，否则/()/g会把每个字符都包一层<span>
用 v-html 渲染但得绕过 uni-app 的自动转义
v-html 是目前全端兼容性最好的方案（rich-text 不支持内联样式，u-parse 体积大、iOS 表现不稳），但它在 uni-app 里默认会对 HTML 字符做二次编码，导致你写的 <span style="color:red">xxx</span> 直接变成页面上可见的文本。
解法不是关掉安全机制，而是提前编码 + 绑定前解码：
- 高亮函数返回的是已编码字符串：
encodeURIComponent(highlightedHtml) - 在 data 或 computed 中用
decodeURIComponent()解码后赋值：this.displayHtml = decodeURIComponent(highlightedHtml) -
v-html绑定这个解码后的字段，不是原始字符串
iOS 真机上颜色不生效？大概率是父容器用了 font-size: 28rpx，而 iOS 对 v-html 内联样式中 rpx 缩放解析异常。临时对策：把颜色抽成 class，别写 style="color:red"。
列表项高亮必须响应式更新且防重绘错位
订单列表通常是 v-for 渲染的，用户边输边搜，keyword 频繁变化。如果直接在 data 里存原始文本、靠计算属性实时生成高亮 HTML，Vue2（uni-app 默认）可能因响应式依赖追踪不及时，导致某几条高亮状态滞后或丢失，尤其在 iOS 小程序里 scroll-view 套 flex 布局时重绘异常多。
- 不要把高亮逻辑放在 computed 里反复执行——性能差，且 Vue2 对嵌套对象响应式劫持有开销
- 改用
watch监听keyword，触发时批量调用highlightText()并更新对应 item 的displayTitle字段 - 关键点：每次更新后加
nextTick，确保 DOM 更新完成再滚动或聚焦，否则光标容易跑偏 - 高亮 span 的 key 要带唯一标识，比如
:key="item.id + '_' + keyword"，避免 Vue 复用节点导致视觉残留
安卓 App 端圆角/背景色失效不是样式问题，是组件限制
很多开发者卡在 u-search 或自定义搜索框在安卓 App 上圆角不显示、背景色变白。这不是 CSS 写错了，而是 u-search 内部用了 cover-view —— 它不支持 border-radius、background 等多数 CSS 属性。
合规写法只有这些：
- 圆角必须写成
radius="8"（数字，单位是 rpx），写"8rpx"或"8px"全无效 - 背景色不能设在父容器，得透传进组件：
::bg-color="'#f8f8f8'" - 取消按钮隐藏必须是
cancel-button="none"，写false或"false"在微信小程序里根本没反应
真机调试时，iOS 和安卓表现不一致是常态。别花时间“统一写法”，按平台条件编译更实际：#ifdef APP-ANDROID 下用 radius="6"，#ifdef MP-WEIXIN 下用 cancel-button="none" —— 这才是上线前最后一周该干的事。
