Hey，我懂你遇到的这个坑——用那种基于Range的方法复制Div内容时，浏览器总会偷偷把HTML结构里的隐性空白（比如代码里的换行、缩进）也带进去，哪怕Div显示出来的文本明明没有换行，复制后还是多出了换行符。

咱们换个更靠谱的思路：直接提取Div的文本内容，先手动把所有换行符清掉，再复制到剪贴板，这样就能完全控制复制的内容了。修改后的代码如下：

function copyDivToClipboard(elem) {
  // 获取目标元素的纯文本内容
  const rawText = document.getElementById(elem).textContent;
  // 移除所有类型的换行符（包括\n和\r）
  const cleanedText = rawText.replace(/[\n\r]/g, '');
  
  // 创建一个临时的textarea（不会在页面上显示）
  const tempTextarea = document.createElement('textarea');
  tempTextarea.value = cleanedText;
  // 把它放到视野外，避免影响页面布局
  tempTextarea.style.position = 'absolute';
  tempTextarea.style.left = '-9999px';
  
  document.body.appendChild(tempTextarea);
  // 选中textarea内容并执行复制
  tempTextarea.select();
  document.execCommand('copy');
  // 用完就删掉临时元素
  document.body.removeChild(tempTextarea);
}

对应的HTML部分可以保持原样：

<div id='test'>This is a test</div>
<button onclick='copyDivToClipboard("test")'>Copy to clipboard</button>

为啥原来的方法会出问题？ #

当你用range.selectNode()选中整个Div元素时，浏览器会把元素内部所有节点的内容（包括HTML代码里的空白字符）都纳入选区。哪怕你写的Div标签是一行到底的，浏览器解析时也可能会引入隐性的换行或空白，这些就会变成复制后的换行符。而直接提取并处理文本内容的方式，能彻底避开这个问题。

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