需要一种在 copyToClipboard 中添加换行符的方法答案

【问题标题】：Need a way of adding line break in copyToClipboard需要一种在 copyToClipboard 中添加换行符的方法
【发布时间】：2018-09-09 12:48:36
【问题描述】：

我使用流式 javascript 从网页上的所有（多个）code 元素中复制文本：

<p id="p1">Copy all code</p>

<button onclick="copyToClipboard('code')">Copy TEXT 1</button>

<script>
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
</script>

这很有用，因为如果页面上有很多代码sn-ps，并且您想要所有这些，您不必一个一个复制它们。但是，最好将复制的代码用空行分隔。

例如，如果我有：

<code>This is code snippet 1
</code>

<code>This is code snippet 2
</code>

以下内容将被复制到剪贴板：

This is code snippet 1This is code snippet 2

我需要的是这样的代码之间的换行：

This is code snippet 1
This is code snippet 2

正如您可能猜到的那样，我想在不更改 code sn-ps 的内容的情况下执行此操作。

【问题讨论】：

您是否尝试在两个code 之间设置br 标签？也许这会有所帮助：stackoverflow.com/questions/42816349/…
javascript line break is not applying when i use document.execCommand("copy")的可能重复

标签： javascript html

【解决方案1】：

如果您想使用多行字符串，请使用 <textarea> 而不是 <input>。重复：Copy

【讨论】：

标记为重复。

【解决方案2】：

假设<code> 的不同部分可以位于文档中的任何位置...
这是我最终得到的代码：

function copyToClipboard(element) {
  var $temp = $("<textarea>");
  $("body").append($temp);
  
  var test = "";
  $(element).each(function(index, item){
    if(index > 0){
      test = test + "\n";
    }
    test = test + item.innerHTML;
  });
  
  console.log(test);
  $temp.val(test).select();
  document.execCommand("copy");
  $temp.remove();
}

code{
  display: block;
  border: 1px solid gray;
  margin: 4px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code>This is code snippet 1</code>
<code>This is code snippet 2</code>
<button onclick="copyToClipboard('code')">Copy all code</button>

希望对你有帮助。

【讨论】：