使用document.execCommand("copy")复制含\n字符串失败如何解决？

这个问题我之前也碰到过！原因是你用setAttribute('value', text)给textarea赋值的时候，字符串里的换行符\n会被当成普通的文本字符，而不是真正的换行，所以复制出来自然就没有换行效果啦。下面给你两种可行的解决方案：

方案一：改进原有textarea方法 #

只需要把设置属性的方式改成直接给value属性赋值，就能正确解析换行符了：

function copyToClipboard(text) {
  var dummy = document.createElement("textarea");
  document.body.appendChild(dummy);
  // 直接赋值value属性，而非使用setAttribute
  dummy.value = text;
  dummy.select();
  document.execCommand("copy");
  document.body.removeChild(dummy);
}
copyToClipboard('Hello, World! \nJames')

方案二：使用现代Clipboard API（推荐） #

document.execCommand("copy")已经被标记为废弃，更推荐使用专门的Clipboard API，它不仅能完美处理换行符，代码也更简洁：

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('文本已成功复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
  }
}
copyToClipboard('Hello, World! \nJames')

这个API不需要创建虚拟DOM元素，直接通过异步方法写入剪贴板，兼容性覆盖绝大多数现代浏览器。

内容的提问来源于stack exchange，提问作者sof-03