使用TypeScript修改复制选中内容的格式，移除剪贴板背景样式

$('#selected-div').off('copy').on('copy', (e) => {
  // 阻止默认复制行为
  e.preventDefault();
  const selection = document.getSelection();
  if (!selection.rangeCount) return;

  // 1. 克隆选中内容的DOM片段，不影响原页面内容
  const selectedFragment = selection.getRangeAt(0).cloneContents();
  // 2. 遍历片段内所有元素，移除所有背景相关样式
  const allElements = selectedFragment.querySelectorAll('*');
  allElements.forEach(el => {
    // 移除内联背景样式
    el.style.background = '';
    el.style.backgroundColor = '';
    el.style.backgroundImage = '';
    // 如果需要移除class带来的背景影响，可以直接清掉所有class，按需开启
    // el.removeAttribute('class');
  });

  // 3. 将处理后的DOM转成HTML字符串
  const tempDiv = document.createElement('div');
  tempDiv.appendChild(selectedFragment);
  const processedHtml = tempDiv.innerHTML;
  const plainText = selection.toString();

  // 4. 用事件自带的clipboardData写入剪贴板，兼容性远高于navigator.clipboard.write
  const clipboardData = e.originalEvent?.clipboardData || e.clipboardData;
  clipboardData.setData('text/plain', plainText);
  clipboardData.setData('text/html', processedHtml);
});

逻辑说明 #

• 不用直接修改Selection对象：Selection本身只是代表用户选中的页面范围，没有直接修改样式的API，我们通过克隆选中范围的DOM副本的方式来处理内容，不会改动原页面的展示
• 样式清理逻辑：遍历选中内容的所有DOM元素，清空所有背景相关的内联样式，其余格式（字体、大小、颜色、段落结构等）都会完整保留
• 剪贴板写入方案：用copy事件原生携带的clipboardData接口写入内容，不需要调用navigator.clipboard相关API，兼容性覆盖所有主流浏览器包括IE11，同时支持写入纯文本和富文本两种格式，适配不同的粘贴场景

注意事项 #

• 如果需要清理由外部样式表控制的背景样式，可以放开代码中移除class的逻辑，避免粘贴时外部样式关联的背景被带入
• 该实现仅拦截#selected-div容器内的复制行为，符合你原有代码的作用范围

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