是HTML5语义化高亮元素，专用于搜索关键词等需突出的上下文内容；使用时须转义HTML与正则字符、注意单词边界、显式声明样式、避免嵌套及滥用，以保障安全、可访问性与兼容性。
标签是 HTML5 原生语义化元素，专为标记“当前上下文中相关、需突出的内容”而设计，搜索关键词高亮正是它最标准、最不可替代的使用场景。
直接包裹关键词就能生效： 找到了关于 Vue 的详细教程。
浏览器默认以黄色背景+黑色文字渲染，视觉上像荧光笔标记。
但真实项目中不能只写 就完事——得兼顾安全、语义、样式和兼容性。
确保内容安全，防 XSS 和 DOM 解析错误
用户输入的搜索词（比如来自 URL 参数 ?q=<script>alert(1)</script>）必须转义后再塞进 。
不要这样写：
element.innerHTML = text.replace(keyword, '<mark>' + keyword + '</mark>'); // 危险！
正确做法是：
- 对 keyword 中的 HTML 特殊字符做实体转义（
&→&，→等） - 正则匹配前，还要转义正则元字符（如
.、*、(会破坏匹配逻辑） - 最好用 DOM 方法组装，而非字符串拼接
简易安全函数示意：
function escapeHtml(str) {
return str.replace(/[&"'`=/]/g, c => `${c.charCodeAt(0)};`);
}
function escapeRegex(str) {
return str.replace(/[.*+?^${}()|[]\]/g, '\$&');
}
function highlight(text, keyword) {
const safeKeyword = escapeRegex(escapeHtml(keyword));
const regex = new RegExp(`(${safeKeyword})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
}
避免误匹配，注意单词边界（尤其英文）
搜 cat 时，不希望 education 被拆成 educacation。
解决方法：
- 英文场景加
边界限定：new RegExp((${safeKeyword}), 'gi') - 中文无天然空格分隔，一般不加
，但需注意全角/半角一致性（如用户搜“JavaScript”，页面里是“javascript”就匹配不到） - 多关键词时，按长度从长到短排序匹配，防止短词截断长词（如先匹配 “JavaScript”，再匹配 “Script”）
样式必须显式声明，不能依赖浏览器默认
很多环境会忽略 UA 默认样式：阅读模式、邮件客户端、深色主题、Windows 高对比度模式等。
至少写清这三项：
mark {
background-color: #ffeb3b; /* 明确指定，别省 */
color: #212121;
padding: 0.1em 0.25em;
}
深色模式下建议补充：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
@media (prefers-color-scheme: dark) {
mark {
background-color: #ffca28;
color: #121212;
}
}
避免只写 background: none —— 它可能漏掉 background-image 等隐式值。
语义要准确，别滥用或嵌套
- ✅ 正确：
请查看 package.json 中的配置项。
- ❌ 错误：
（不能包裹交互元素） - ❌ 错误：
ReactNative（嵌套无效，浏览器自动修正，语义丢失） - ❌ 错误：整段警告文字全包
（该用或 CSS 类）
辅助技术（如读屏器）会把 明确读作“高亮文本”，这是 永远做不到的。搜索引擎也可能提取 内容生成摘要片段。
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
