标签可直接高亮文本但需注意：它是内联元素，不能包裹块级标签；富文本中须提取纯文本节点操作；必须用CSS显式定义背景色、文字色、内边距和圆角；动态高亮时要转义正则元字符、保持大小写、遍历文本节点而非innerHTML；关键词按长度降序处理防嵌套；服务端渲染需防XSS。
直接用 <mark></mark> 包裹文本就能高亮
不需要 JavaScript 或额外库，只要把想突出的纯文本用 <mark></mark> 和 包起来，浏览器就会默认加黄色背景。比如：<p>核心算法基于<mark>动态规划</mark>实现</p>。
但注意：<mark></mark> 是内联元素，不能直接包 <p></p>、<div> 这类块级标签；如果内容里已有 HTML（比如带链接的富文本），直接套 <code><mark></mark> 会破坏 DOM 结构——必须先提取纯文本节点再操作。
mark 样式必须显式重写，别信默认色
不同浏览器对 mark 的默认背景色不一致（Chrome 偏黄，Safari 偏橙，深色模式下可能变透明），而且 IE9+ 虽支持该标签，但样式不可靠。生产环境必须用 CSS 显式定义：
mark {
background-color: #ffeb3b;
color: #212121;
padding: 0.1em 0.2em;
border-radius: 2px;
}
关键点：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
background-color和color必须同时设，否则在深色主题或高对比度模式下可能不可读 - 避免只写
background: none，要用background-color: transparent确保清空背景 -
padding比margin更安全，因为<mark></mark>是内联元素，垂直margin无效
JavaScript 动态高亮关键词时，正则和节点遍历是两道坎
常见错误是直接对 innerHTML 做 replace()，比如：el.innerHTML = el.innerHTML.replace(keyword, '<mark>$</mark>')。这会在三种情况下翻车：
- 用户搜
[a-z]这类含正则元字符的词，不转义就崩 —— 必须先keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 匹配大小写不敏感但替换后丢失原大小写 —— 用捕获组
new RegExp(`(${escaped})`, 'gi')，再'<mark>$1</mark>' - 目标容器含 HTML（如
<strong>React</strong>），innerHTML.replace()会把标签当普通字符串撕开 —— 正确做法是遍历所有文本节点（node.nodeType === 3），只在纯文本里做替换，并用document.createElement('mark')插入
多个关键词高亮要防重叠，长词优先是硬规则
比如同时高亮 "JavaScript" 和 "Script"，如果先匹配短词，"Script" 可能被插进已闭合的 <mark></mark> 里，导致嵌套非法（<mark>Java<mark>Script</mark></mark>）。浏览器会自动修正为两个独立 <mark></mark>，但语义断裂、样式错位。
安全做法：
- 把关键词按长度降序排列，先处理
"JavaScript"，再处理"Script" - 匹配时用
String.prototype.indexOf()手动扫描位置，跳过已被标记的区间 - 或者改用
Range+DocumentFragment方案，完全绕过字符串拼接
最易被忽略的是：服务端渲染时若直接拼接 <mark></mark>，没做 XSS 过滤，用户搜 <img src="x" onerror="alert(1)" alt="HTML中mark高亮怎么实现 HTML中mark标签样式设置" > 就会触发脚本执行。动态插入前必须 escape HTML 实体或使用 textContent 回退机制。
