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

Posted 2023-05-08

【中文标题】将多个 div 复制到剪贴板并添加字符

【英文标题】：Copy more than one div to clipboard and adding characters

【发布时间】：2022-01-17 00:51:15

【问题描述】：

我正在使用以下脚本将 div 复制到剪贴板。但我正在尝试使用相同的按钮复制多个 div (DivA + DivB)，同时在每个 div 周围添加一些引号和括号。我看到了一些答案（如this one、and this），但我似乎无法将它们实现到当前脚本。

所以输出应该是这样的：

"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>

【参考方案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;

<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>

【讨论】：

效果很好.. 谢谢。

没问题，很高兴为您提供帮助

为什么我在这里测试它不起作用？ jsfiddle.net/kv3dw8mz

它在那个小提琴中不起作用，因为你已经删除了最后一个 所以有语法错误