将多个div复制到剪贴板并添加字符

Question

我正在使用以下脚本将div复制到剪贴板。但是我试图用同一个按钮复制多个div（DivA DivB），同时在每个div周围添加一些引号和括号。我看到了一些答案（比如这个和这个），但我似乎无法在当前脚本中实现它们。

所以输出应该是这样的：

"A certain quote" (Author Name).

这是当前复制一个div的脚本。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divA">
<p>A certain quote</p>
</div>

<div id="divB">
<p>Author Name</p>
</div>

<button onclick="copyToClipboard('#divA')">Copy</button>

Answer 1

问题是因为您只读取了“#divA”中的文本，因为这是传递给copyToClipboard（）函数的选择器。

要执行所需操作，请修改逻辑，以所需格式创建包含#divA和#divB文本的字符串：

let $divA = $('#divA');
let $divB = $('#divB');

$('button').on('click', e => {
  copyToClipboard(`"${$divA.text().trim()}" (${$divB.text().trim()}).`);
});

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

textarea {
  width: 300px;
  height: 30px;
}

html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divA">
  <p>A certain quote</p>
</div>
<div id="divB">
  <p>Author Name</p>
</div>
<button type="button">Copy</button><br /><br />

Paste here to test:<br />
<textarea></textarea>