Chromium浏览器复制带text-decoration:underline文本粘贴样式异常求助

核心思路 #

Chromium内核浏览器会把元素计算后的样式（包括类定义的text-decoration）转成内联样式写入剪贴板的HTML数据，导致粘贴后保留下划线。我们可以通过监听copy事件，自定义剪贴板中的内容，移除目标元素的下划线样式，同时不影响页面原有显示效果。

具体实现方案 #

方法一：拦截复制事件，清理剪贴板中的样式

监听文本展示区域的copy事件，阻止默认复制行为，然后处理选中内容的HTML结构，移除annotation类元素的下划线样式，再将清理后的内容写入剪贴板：

// 替换为你实际的文本展示区域选择器
const displayContainer = document.querySelector('.text-display-area');

displayContainer.addEventListener('copy', (event) => {
  event.preventDefault();
  
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  
  const range = selection.getRangeAt(0);
  const clonedContent = range.cloneContents();
  
  // 清理所有带annotation类元素的下划线样式
  const annotationElements = clonedContent.querySelectorAll('.annotation');
  annotationElements.forEach(el => {
    el.style.removeProperty('text-decoration');
    // 如需彻底清除行内样式，可替换为：el.removeAttribute('style');
  });
  
  // 转换为处理后的HTML字符串
  const tempDiv = document.createElement('div');
  tempDiv.appendChild(clonedContent);
  const cleanHtml = tempDiv.innerHTML;
  
  // 写入剪贴板，同时保留纯文本格式
  event.clipboardData.setData('text/html', cleanHtml);
  event.clipboardData.setData('text/plain', selection.toString());
});

方法二：仅复制纯文本（无需保留HTML结构时使用）

如果不需要保留任何HTML结构，只需要复制纯文本，可以简化处理：

displayContainer.addEventListener('copy', (event) => {
  event.preventDefault();
  const selectionText = window.getSelection().toString();
  event.clipboardData.setData('text/plain', selectionText);
});

注意事项 #

• 该方案仅针对Chromium内核浏览器生效（匹配你的问题场景），Firefox本身无此问题，不会受影响。
• 代码中的选择器需替换为你项目中实际的文本展示区域选择器。
• 若需要保留其他样式，可调整清理逻辑，仅移除text-decoration相关样式即可。

内容的提问来源于stack exchange，提问作者spaceemotion