HTML5中标签无法在纯文本粘贴时保留重点标识，需通过监听copy事件、调用preventDefault()并用clipboardData.setData自定义纯文本和HTML内容来实现；user-select:none不能防复制且损害可访问性。
HTML5里用<mark></mark>标注重点，但复制时默认不带样式
直接用 <mark></mark> 标签包裹文字确实能视觉高亮，比如 <mark>关键结论</mark>，但用户 Ctrl+C 复制后粘贴到纯文本环境（如记事本、邮件正文），<mark></mark> 标签被剥离，只剩“关键结论”四个字——标注信息完全丢失。这不是 bug，是浏览器对富文本复制的默认策略：只保留语义结构（如标题、列表），不保留装饰性标签。
想复制时保留“重点”标识，得靠 CSS + 自定义复制逻辑
纯 HTML 无法让 <mark></mark> 在粘贴时自动变成“【重点】关键结论”这类文本。必须拦截复制事件，手动改写剪贴板内容：
- 监听
copy事件，调用event.preventDefault() - 用
event.clipboardData.setData('text/plain', ...)写入带前缀的纯文本 - 同时保留原有 HTML 片段（用
setData('text/html', ...)）供支持富文本的场景使用 - 注意：仅在用户真正在选中
<mark></mark>元素时才触发替换，避免影响其他复制行为
示例片段：
document.addEventListener('copy', e => {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const markEl = range.commonAncestorContainer.parentElement?.closest('mark');
if (markEl) {
e.preventDefault();
const plainText = `【重点】${markEl.textContent}`;
e.clipboardData.setData('text/plain', plainText);
e.clipboardData.setData('text/html', markEl.outerHTML);
}
}
});
user-select: none不能防复制，只是禁用鼠标选中
有人误以为加 style="user-select: none" 能阻止复制，其实它只让文字无法被鼠标拖选，不影响键盘快捷键（Ctrl+A → Ctrl+C）或 JS 主动调用 document.execCommand('copy')。更关键的是：它会破坏可访问性（屏幕阅读器可能跳过），也违背用户对页面交互的预期。真正需要“防漏标”，应聚焦在复制内容的生成逻辑上，而不是封锁选择行为。
选区边界处理容易出错：getSelection() 和 range 的常见陷阱
复制时选区可能跨多个元素，或只覆盖 <mark></mark> 的一部分。直接取 selection.toString() 会丢掉结构信息；而依赖 range.commonAncestorContainer 可能返回文本节点，需向上找父级 mark 元素。建议：
立即学习“前端免费学习笔记（深入）”；
- 用
range.intersectsNode(markEl)判断是否与任意<mark></mark>重叠，而非只查祖先 - 若选区包含多个
<mark></mark>，逐个提取并拼接，避免只处理第一个 - 注意 IE 不支持
clipboardData.setData，现代项目可忽略，但若需兼容旧环境，得降级为提示文案
最易被忽略的一点：复制操作可能发生在 iframe 或 shadow DOM 内，此时 window.getSelection() 返回的选区范围未必属于当前文档上下文——得先确认 range 所属的 ownerDocument 是否匹配。
