求助：JavaScript点击元素复制内容到剪贴板功能技术咨询

嘿，我瞅了一眼你当前的复制到剪贴板实现，发现有几个可以优化的点——尤其是document.execCommand("copy")已经被浏览器标记为废弃API了，给你更新两个更现代、可靠的版本，适配不同的项目需求：

纯JavaScript版本（无jQuery依赖，更轻量） #

这个版本不需要依赖jQuery，直接用原生JS实现，代码更简洁，兼容性也更好：

async function copyToClipboard(element) {
  // 直接获取元素的纯文本内容，自动忽略所有HTML标签（比如<br>、<span>等）
  const text = element.textContent.trim();
  
  try {
    // 使用现代浏览器推荐的Clipboard API写入文本
    await navigator.clipboard.writeText(text);
    // 可选：给用户一个复制成功的反馈
    alert('内容已成功复制到剪贴板！');
  } catch (err) {
    // 处理复制失败的情况（比如用户拒绝剪贴板权限）
    console.error('复制失败:', err);
    alert('复制失败，请手动复制内容');
  }
}

按钮使用示例 #

<button onclick="copyToClipboard(document.getElementById('target-div'))" style="/* 你的自定义样式 */">复制内容</button>
<div id="target-div">
  这是要复制的文本内容<br>
  包括换行的内容也能正确复制哦
</div>

保留jQuery的版本（适配已有jQuery的项目） #

如果你的项目还在使用jQuery，这个版本可以无缝替换原代码：

async function copyToClipboard(selector) {
  // 用jQuery的text()方法获取纯文本，自动过滤HTML标签
  const text = $(selector).text().trim();
  
  try {
    await navigator.clipboard.writeText(text);
    alert('内容已成功复制到剪贴板！');
  } catch (err) {
    console.error('复制失败:', err);
    alert('复制失败，请手动复制内容');
  }
}

按钮使用示例 #

<button onclick="copyToClipboard('#target-div')" style="/* 你的自定义样式 */">复制内容</button>
<div id="target-div">
  这是要复制的文本内容<br>
  包括换行的内容也能正确复制哦
</div>

优化点说明 #

• 替换废弃API：用navigator.clipboard.writeText()替代已废弃的document.execCommand("copy")，符合现代浏览器标准，兼容性更好
• 更可靠的文本提取：用textContent（或jQuery的text()）替代正则移除HTML标签，避免正则漏匹配的情况，准确获取纯文本
• 移除冗余操作：不需要创建临时textarea元素，代码更简洁高效
• 错误处理：加入try-catch块处理剪贴板权限不足等异常情况，提升用户体验
• 安全合规：Clipboard API需要在用户交互上下文（比如点击按钮）中调用，符合浏览器的安全限制

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