当前位置：首页 > JavaScript

js实现div复制

2026-02-03 03:08:11JavaScript

使用`document.execCommand`方法（已废弃但部分浏览器仍支持）

function copyDivUsingExecCommand(divId) {
  const div = document.getElementById(divId);
  const range = document.createRange();
  range.selectNode(div);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand('copy');
  window.getSelection().removeAllRanges();
}

该方法通过创建文本范围并执行复制命令实现，但注意execCommand已不被现代标准推荐。

使用现代Clipboard API

async function copyDivUsingClipboardAPI(divId) {
  const div = document.getElementById(divId);
  try {
    await navigator.clipboard.writeText(div.innerText);
    console.log('内容已复制');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

需要HTTPS环境或localhost，支持文本内容复制，是最新的标准方法。

复制带HTML格式的内容

async function copyDivWithHTML(divId) {
  const div = document.getElementById(divId);
  const htmlContent = new Blob([div.innerHTML], { type: 'text/html' });
  const textContent = new Blob([div.innerText], { type: 'text/plain' });

  const data = new ClipboardItem({
    'text/html': htmlContent,
    'text/plain': textContent
  });

  try {
    await navigator.clipboard.write([data]);
  } catch (err) {
    console.error('复制失败:', err);
  }
}

这种方法可以保留原始HTML格式，适合需要富文本复制的场景。

创建临时textarea元素

function copyDivViaTextarea(divId) {
  const div = document.getElementById(divId);
  const textarea = document.createElement('textarea');
  textarea.value = div.innerText;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

兼容性较好的方案，适用于不需要HTML格式的纯文本复制场景。

js实现div复制