<mark>是唯一语义正确、开箱即用的高亮方案，但需显式声明背景色与文字色以保障可访问性，且动态高亮必须用TreeWalker或Range API安全操作DOM，避免XSS和结构破坏。

<mark> 是唯一语义正确、开箱即用的方案，别用 <span> 加 background-color 临时凑合——它不传达“这段文字与上下文强相关”，屏幕阅读器不会提示，SEO 也无额外信号。

为什么直接写 <mark>关键词</mark> 还是黄底看不清？

浏览器默认黄色在暗色模式、高对比度设置、邮件客户端里基本失效。不写 CSS 就上线，等于放弃可访问性。

• 必须显式声明 background-color 和 color，不能依赖默认值
• 建议加 padding: 2px 4px，避免文字紧贴边缘
• 深色模式要手动适配：@media (prefers-color-scheme: dark) { mark { background-color: #ffca28; color: #121212; } }
• 别写 background: none——它不清除 background-image，应写 background-color: transparent

动态高亮关键词时，innerHTML.replace() 为什么总出错？

这是最危险的写法：用户搜 [a-z]，正则没转义 → 脚本中断；搜 <script>alert(1)</script> → XSS；原文含 <code>console.log()</code> → 替换后 <code>console.<mark>log</mark>()</code>，<mark> 被撕开，DOM 解析失败。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 必须只操作文本节点，用 document.createTreeWalker(element, NodeFilter.SHOW_TEXT)
• 关键词要做双重转义：HTML 实体（& → &） + 正则元字符（. → \.）
• 匹配后创建新 mark 元素：const mark = document.createElement('mark'); mark.textContent = match;，再用 node.parentNode.replaceChild(mark, node)
• 中文关键词记得加 u 标志：new RegExp(pattern, 'giu')

用 Range API 高亮用户选中的文字，比正则更稳

正则替换无法区分“用户拖选的‘abc’”和“其他位置独立出现的‘abc’”，还容易跨标签切开 HTML 结构。而 window.getSelection() 拿到的是真实选区，Range.surroundContents() 可原位包裹，零风险。

立即学习“前端免费学习笔记（深入）”；

• 获取选区：const selection = window.getSelection(); if (selection.rangeCount === 0) return;
• 取首个范围：const range = selection.getRangeAt(0);
• 创建并包裹：const mark = document.createElement('mark'); range.surroundContents(mark);
• 注意：若选区跨多个节点（如含 <strong>），surroundContents 会抛错，需先 range.cloneContents() 再重构

真正难的不是怎么写 <mark>，而是决定“谁该被标记”——语义边界模糊时（比如关键词嵌套、部分匹配、HTML 实体混杂），Range 或 TreeWalker 才是兜底手段；样式只是表层，可访问性和 DOM 安全才是容易被忽略的硬伤。