如何在copyToClipboard方法中添加换行？附网页多代码元素复制JS代码

嘿，我明白你的需求啦！你现在的代码只能复制第一个匹配到的code元素文本，多个代码片段会直接连在一起可读性很差。要实现复制所有code元素内容并自动用换行分隔，只需要调整copyToClipboard函数里的文本拼接逻辑就行，具体看下面的修改：

修改后的完整代码 #

<p id="p1">Copy all code</p>
<button onclick="copyToClipboard('code')">Copy TEXT 1</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function copyToClipboard(element) {
  // 1. 收集所有code元素的文本，存入数组
  let codeTexts = [];
  $(element).each(function() {
    codeTexts.push($(this).text());
  });
  
  // 2. 用换行符连接所有文本（\r\n适配Windows，\n适配Mac/Linux，也可以统一用\n）
  let combinedText = codeTexts.join('\r\n');
  
  // 3. 执行复制逻辑（和原来的流程一致）
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(combinedText).select();
  document.execCommand("copy");
  $temp.remove();
  
  // 可选：添加复制成功提示
  alert('所有代码片段已复制到剪贴板！');
}
</script>

关键修改点说明 #

• 原来的$(element).text()会把所有code元素的文本直接拼接成一串（无分隔），现在改用.each()遍历每个code元素，把文本单独存入数组
• 用join('\r\n')把数组里的文本用换行符连接，这样复制到剪贴板后，每个code的内容会单独占一行
• 如果你不需要适配Windows的换行格式，也可以换成join('\n')，大部分场景下也能正常显示换行

另外要注意，你的代码依赖jQuery，所以要确保页面已经引入了jQuery库哦（上面的代码已经加了CDN引入，你可以根据自己的项目调整）。

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