关键词高亮需先转义正则特殊字符，再用RegExp构造全局匹配；innerHTML插入前须XSS过滤，推荐textContent提取纯文本后清洗；DOM渲染优先createElement混合textContent/innerHTML；移动端点击高亮词应绑定父容器事件并用closest判断。
搜索关键词高亮必须用正则，但别直接 replace() 全局匹配
浏览器原生不提供“高亮文本中关键词”的 API，得自己实现。常见错误是写成 str.replace(keyword, '<mark>$&</mark>')，这在关键词含正则特殊字符（如 .、+、?）时直接报错或错配。正确做法是先对关键词做转义：keyword.replace(/[.*+?^${}()|[]\]/g, '\$&')，再构造 RegExp 实例并启用 g 标志。注意：大小写要和搜索输入一致，若需忽略大小写，加 i 标志，但记得在 replace() 中用函数回调获取原始匹配内容，否则 <mark></mark> 会破坏原有大小写。
innerHTML 插入高亮 HTML 前，务必先做基础 XSS 过滤
用户搜 <script>alert(1)</script> 是真实风险。不能只依赖前端高亮就认为安全。最简方案：在拼接高亮结果前，对原始文档标题/摘要做一次基础清洗——用 textContent 提取纯文本，再用正则替换掉所有 HTML 标签（str.replace(/]*>/g, '')），最后才对清洗后的文本执行高亮。如果后端已返回转义过的字段（如 <script></script>），那前端可跳过清洗，但高亮时仍要用 textContent 创建临时元素提取内容，避免误解析。
列表 DOM 渲染别用字符串拼接，优先选 document.createElement + textContent/innerHTML 混合
搜索结果少时字符串拼接（html += `...`）没问题；但结果超 20 条，或需频繁重绘（如分页、筛选），就会卡顿。实操建议：for 循环内统一用 document.createElement('li') 创建项，标题用 textContent 设置（防 XSS），摘要中高亮部分用 innerHTML（仅限已清洗且高亮过的字符串）。这样既保性能又控安全。别用 insertAdjacentHTML 批量塞整页 HTML——它会触发多次回流，且无法单独控制每个字段的渲染方式。
移动端点击高亮词触发页面跳转？别绑 click 到 mark 上
直接给 <mark></mark> 加 onclick 在 iOS Safari 下常失效，因为 mark 不是交互元素，默认不响应点击。更稳的做法：给整个搜索项（li 或 article）绑定点击事件，然后用 event.target.closest('mark') 判断是否点中了高亮词；若是，再取其 textContent 作为二次搜索关键词。顺便提醒：别忘了加 cursor: pointer 和 user-select: none 到 mark，不然安卓长按容易触发文字选择框，干扰操作。
立即学习“前端免费学习笔记（深入）”；
