mark标签无法通过CSS取消高亮，必须真实移除DOM节点以恢复原始文本结构，否则会残留语义与无障碍问题；多关键词需用data-keyword区分并按长度降序插入。

mark 标签本身没有“取消高亮”的内置属性，所谓“取消”，本质是移除 mark 元素或还原原始文本节点 —— 直接删 DOM 或回滚内容，不是靠 CSS 属性开关。

用 JavaScript 移除已插入的 mark 节点最可靠

动态高亮后，若要取消，不能只改样式（比如 display: none），因为语义和可访问性仍残留。必须真实还原 DOM 结构：

• 遍历所有 mark 元素：document.querySelectorAll('mark')，对每个调用 node.parentNode.replaceChild(node.firstChild, node)
• 如果原始文本被多次高亮（嵌套或重叠），建议在插入 mark 时就缓存原始文本节点引用，取消时直接 restore，避免重复解析
• 别用 innerHTML = innerHTML.replace(/(.*?)/g, '$1') —— 容易破坏 HTML 结构，尤其当原文含 、& 或其他实体时会解码错乱

为什么 mark { background: none } 不算真正取消

CSS 隐藏只是视觉遮盖，但 mark 仍存在于 DOM 树中，带来三个实际问题：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 读屏器仍会播报“高亮开始”“高亮结束”，干扰无障碍体验
• 后续 JS 再次高亮同一段文本时，可能包裹在已有 mark 内部，造成嵌套（如 xxx），浏览器虽自动扁平化，但语义已丢失
• 若用 getSelection() 获取用户选中文本，mark 标签会干扰 range.toString() 的纯净度

多关键词高亮后如何精准取消某一个关键词

如果同时高亮了 "API" 和 "API key"，且想只取消后者，不能简单删所有 mark —— 必须带上下文过滤：

• 插入时给每个 mark 加唯一 data-keyword 属性：mark.dataset.keyword = "API key"
• 取消时查：document.querySelectorAll('mark[data-keyword="API key"]')，再逐个替换回文本节点
• 注意：若关键词有重叠（如 "key" 和 "API key"），插入顺序必须按长度降序，否则 data-keyword 无法一一对应原始匹配片段

真正难的不是“怎么删”，而是“删完是否还剩语义污染”——只要 mark 还在 DOM 里，它就还在告诉浏览器“这段文本被标记为重点”，哪怕你看不见。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！