必须按标签长度降序排序后匹配：先处理长标签如#tagAgain，再处理短标签如#tag，避免短标签截断长标签；需用sort((a,b)=>b.length-a.length)排序并添加字边界\b确保精确匹配。
标签高亮时长标签被短标签截断
常见错误现象：#tagAgain 本该整体高亮为红色，结果被拆成 #tag（蓝色）+ Again（普通文本），因为正则匹配顺序没控制好。
根本原因是字符串替换未按长度降序处理：JavaScript 的 String.prototype.replace() 默认从左到右贪婪匹配，若 "#tag" 在 "#tagAgain" 之前参与匹配，就会先命中子串。
- 必须将颜色映射的 key 提取为数组，并用
sort((a, b) => b.length - a.length)降序排列 - 遍历排序后数组，对每个
tag构造带字边界（\b）或前缀锚定（(?）的正则，避免误匹配嵌入词 - 不要用全局
/g一次性替换所有标签——不同标签颜色不同，必须逐个replace()
HTML结构里高亮后标签互相覆盖
典型场景：高亮逻辑把 #tag 替换成 <span style="color:#00ccff">#tag</span>，但原始文本在 <div> 内是纯文本节点；替换后若未清除旧内容、直接 <code>innerHTML = newHtml，可能破坏原有 DOM 结构（比如内含 <button></button> 或事件监听器）。
更隐蔽的问题是：多个高亮 span 嵌套或相邻时，CSS 的 display、line-height 或 vertical-align 不一致，导致视觉错位、文字重叠。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 始终用
textContent获取原始文本，避免误读已有 HTML 标签 - 生成高亮 HTML 后，用
Element.replaceChildren()（现代浏览器）或清空再insertAdjacentHTML('beforeend', ...)替换，不粗暴赋值innerHTML - 给高亮
<span></span>统一加style="display: inline; line-height: 1.4;"，防止因父容器line-height过小造成行内元素挤压
z-index 和 stacking context 导致浮层高亮盖不住编辑器控件
如果你的高亮逻辑用于富文本编辑器预览区，且高亮标签以浮动气泡或悬浮框形式呈现，却总被工具栏按钮挡住，大概率不是 z-index 数值不够大，而是 stacking context 被意外截断。
例如：预览区域包裹在 <div class="preview" style="transform: translateZ(0);"> 中 → 这个 <code>div 自动成为新的 stacking context，其内部所有子元素（包括高亮浮层）的 z-index 只在此上下文内有效，无法压过同级的编辑器工具栏。
- 检查高亮浮层的最近祖先是否设置了
opacity 、<code>transform非 none、filter、will-change或contain—— 任一都会创建新 stacking context - 浮层应直接挂载到
document.body下，用position: fixed+ 显式z-index（如30），并确保工具栏层级设为10，留足间隙 - 用浏览器开发者工具的 “Computed” 面板查看目标浮层的
z-index是否显示为auto，若显示为数值但依然被盖，说明它已被父级 stacking context 封装
mix-blend-mode 在表格中失效还引发重叠
试图用 td:hover { mix-blend-mode: overlay; } 实现色彩叠加高亮？别试了。表格单元格默认不构成独立 stacking context，mix-blend-mode 没有“下方层”可混合，既无效，又可能因渲染引擎差异导致布局抖动甚至单元格错位。
真正可控的做法是放弃像素混合，改用背景叠加或伪元素遮罩：
- 用
background-blend-mode：给td设双背景（一层底色 + 一层半透明高光渐变），hover 时切换 blend mode 或调整 opacity - 用
td::after：绝对定位伪元素覆盖单元格，初始opacity: 0，hover 时设opacity: 0.25+background-color，配合transition - 禁用
mix-blend-mode相关样式——它在表格中不是“不理想”，而是“不可用”，强行启用只会掩盖真实布局问题
实际最易被忽略的点：高亮逻辑若运行在 DOMContentLoaded 之后，但文本内容由异步 API 加载，就可能漏掉后续插入的标签；必须监听内容变化（如 MutationObserver）或在数据注入后显式触发高亮函数。
