忽略大小写匹配需用 /i 标志，但必须结合单词边界 （英文）、中文上下文判断（非中文字符环绕）、关键词元字符转义、仅处理文本节点、多词按长度降序匹配、避免嵌套高亮，并补充 mark 的显式 CSS 样式。
直接用 String.prototype.replace() 配合 /i 标志就能实现忽略大小写匹配，但仅加 i 不够——容易误匹配子串、破坏 HTML 结构、漏掉中文或混合场景。关键在正则构造和节点处理方式。
为什么 /keyword/i 会误高亮
搜 cat 时，education 里的 cat 也被包进 <mark></mark>；搜 js 时，javascript 和 json 全中招。这不是正则写错了，而是没加边界控制。
- 英文必须用
单词边界：正则写成/(cat)/gi，cat才只匹配独立单词 -
对中文无效（中文无空格分隔），若页面含中英混排，得拆逻辑：英文走，中文靠前后字符是否为非中文（(?） - 关键词本身含正则元字符（如用户搜
a.b），不转义会报错，必须先过keyword.replace(/[.*+?^${}()|[]]/g, '\$&')
不能对 innerHTML 直接 replace()
常见错误是写 el.innerHTML = el.innerHTML.replace(regex, '<mark>$1</mark>')，这会导致三类崩溃：
- 原文有
<div>hello</div>，正则把当标签开头切开，结果变成 <code><mark></mark>div>hello，DOM 解析失败 - 用户搜
<script></script>，拼进字符串后直接执行 XSS - 表单输入框、
<textarea></textarea>、<script></script>内容也被替换，功能异常
正确做法是只遍历文本节点：document.createTreeWalker(el, NodeFilter.SHOW_TEXT)，跳过所有元素节点和 script/style/textarea 父级。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
多关键词共存时的排序陷阱
同时高亮 JavaScript 和 Script，如果按数组顺序逐个替换，短词先动刀，就会产出 <mark>Java</mark><mark>Script</mark> 这种语义断裂结构——浏览器虽会自动展平，但 CSS 无法连续着色，且可访问性 API 读不出完整词。
- 必须按关键词长度**降序排列**：
wordsToHighlight.sort((a, b) => b.length - a.length) - 每个词单独构建正则，避免用
/(js|javascript)/gi这类 OR 合并——它无法保证长词优先匹配 - 匹配前检查当前文本节点是否已含
<mark></mark>，防止嵌套：if (node.parentElement?.matches('mark')) return
样式必须显式声明，/i 不解决渲染问题
忽略大小写只管匹配逻辑，不管显示效果。很多环境根本看不到黄色背景：
- Windows 高对比度模式下，
<mark></mark>默认背景被强制设为黑色，文字消失 - Outlook 邮件客户端完全忽略 UA 样式，
<mark></mark>变成普通文本 - 深色主题里默认黄底黑字对比度不足，WCAG AA 不达标
至少写清这三条 CSS：
mark {
background-color: #ffeb3b;
color: #212121;
padding: 0 2px;
}别省略 color——禁用 UA 样式的环境里，文字可能继承父级透明色而不可见。
