copy事件中无法获取复制内容的HTML，VSCode扩展场景下如何解决

解决方案 #

正确的实现思路是使用Selection API获取用户选中的完整范围，再提取对应HTML内容。原有方案通过e.target遍历兄弟节点的方式仅适用于选中内容均在同一个父元素下的场景，跨父元素选中（如不同<li>内的内容）时自然无法获取到全部内容。

完整实现代码如下：

document.addEventListener('copy', async (e) => {
  // 阻止默认复制行为，避免和自定义写入逻辑冲突
  e.preventDefault();
  // 获取当前选中对象
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  // 获取选中的范围对象
  const range = selection.getRangeAt(0);
  // 创建临时容器存储选中的DOM片段
  const tempContainer = document.createElement('div');
  tempContainer.appendChild(range.cloneContents());
  // 得到选中内容的完整HTML
  const selectedHtml = tempContainer.innerHTML;

  // 此处编写你需要的样式去除处理逻辑
  const processedHtml = selectedHtml.replace(/需要匹配的样式规则/g, '');

  // 处理后的内容写入剪贴板
  const blob = new Blob([processedHtml], { type: 'text/html' });
  const item = new ClipboardItem({ 'text/html': blob });
  await navigator.clipboard.write([item]);
});

适配说明 #

• 该方案可直接在VSCode扩展的Webview环境中运行，VSCode内置的Chromium内核完全支持Selection API与Clipboard API
• 若需要同时兼容纯文本粘贴场景，可往ClipboardItem中额外添加text/plain类型的内容即可。

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