使用 JS 将多个元素的内部文本复制到剪贴板

Question

我有以下HTML代码，我想使用Javascript将每个p元素的innerText复制到剪贴板。innerText 值是动态和随机生成的。

<div class="colour-palette-showcase">
<div class="colour-value">
<div class="colour"></div>
<p class="colour-value-text"></p>
</div>
<div class="colour-value">
<div class="colour"></div>
<p class="colour-value-text"></p>
</div>
<div class="colour-value">
<div class="colour"></div>
<p class="colour-value-text"></p>
</div>
<div class="colour-value">
<div class="colour"></div>
<p class="colour-value-text"></p>
</div>
<div class="colour-value">
<div class="colour"></div>
<p class="colour-value-text"></p>
</div>
</div>

我已经将.colour-value-text存储到一个变量中，运行了一个forEach并将其存储到一个新变量中。但是当我尝试document.execCommand('copy')时，它会循环并仅复制最后一个。 我猜我需要将所有值存储到一个数组中，然后将其复制到剪贴板。还是我走错了路？

任何帮助非常感谢。这是我第一次尝试一个小JS项目。

谢谢

Answer 1

这是一个代码示例，它将所有<p>的innerHTML复制到数组，并从数组复制到临时textarea，从那里将完整的值复制到剪贴板：

document.getElementById('copy-button').onclick = function() {
let values = [];
document.querySelectorAll('.colour-value-text').forEach( (p) => values.push( p.innerHTML ) );
let text = document.createElement('textarea');
document.body.appendChild(text);
text.value = values.join(', ');
text.select();
document.execCommand('copy');
text.parentNode.removeChild(text);
}

<div class="colour-palette-showcase">
<div class="colour-value">
<div class="colour"></div>
<p class="colour-value-text">1</p>
</div>
<div class="colour-value">
<div class="colour"></div>
<p class="colour-value-text">2</p>
</div>
<div class="colour-value">
<div class="colour"></div>
<p class="colour-value-text">3</p>
</div>
<div class="colour-value">
<div class="colour"></div>
<p class="colour-value-text">4</p>
</div>
<div class="colour-value">
<div class="colour"></div>
<p class="colour-value-text">5</p>
</div>
</div>
<button id="copy-button" type="button">copy</button>

复制到剪贴板：1, 2, 3, 4, 5

Answer 2

像这样的东西？

const range = document.createRange();
range.selectNode(document.getElementById("example"));
window.getSelection().addRange(range);
document.execCommand("copy");

您可以使用document.getElementsByClassName("example");的 OFC