使用javascript将文本从div复制到剪贴板

Question

我正在尝试使用将文本从下一个div复制到剪贴板Javascript。下面是我当前的代码：

HTML：

<div class="hl7MsgBox">
    <span class="boxspan">1</span>
    <br>
    <span class="boxspan">2</span>
    <br>
    <span class="boxspan">3</span>
    <br>
    <span class="boxspan">4</span>
    <br>
    <span class="boxspan">5</span>
    <br>
    <span class="boxspan">6</span>
    <br>
    <span class="boxspan">7</span>
    <br>
    <span class="boxspan">8</span>
</div>

Javascript：

$(".btnFileCopy").click(function () {
    var copyText = document.getElementsByClassName("hl7MsgBox");
    copyText.select();
    document.execCommand("copy");
});

我期望将新输出粘贴到中时得到notepad：

1
2
3
4
5
6
7
8

但是，由于某种原因，它无法正常工作并抛出下一条错误消息：

未捕获的TypeError：copyText.select不是函数...

有谁知道我该如何解决这个问题？

Answer 1

首先，一些参考：

getElementsByClassName()Document接口的方法返回具有所有给定类名的所有子元素的类似数组的对象。在文档对象上调用时，将搜索完整的文档，包括根节点。您也可以调用getElementsByClassName()任何元素；它只会返回具有给定类名的指定根元素的后代元素。

因此，在您的特定情况下，该copyText变量将包含一个元素数组（那些hl7MsgBox在文档元素下具有类的元素）。现在，由于在您的情况下该类只有一个元素，因此您可以使用进行访问，并使用来copyText[0]包装它的所有文本copyText[0].textContent。总而言之，您可以执行下一步以获取要复制的文本：

var elems = document.getElementsByClassName("hl7MsgBox");
var copyText = elems[0].textContent;

另一种可能性是使用方法querySelector（）：

Document方法querySelector()返回文档中与指定选择器或选择器组匹配的第一个Element。如果找不到匹配项，null则返回。

使用该querySelector()方法，您可以简单地执行以下操作：

var copyText = document.querySelector(".hl7MsgBox").textContent;

最后，我们可以创建一个称为copyToClipBoard()的通用方法，其唯一的工作就是将接收string到的信息复制到剪贴板，然后使用纯净的代码重新排列代码，Javascript如下所示：

var elems = document.getElementsByClassName("hl7MsgBox");
var copyText = elems[0].textContent;

var copyText = document.querySelector(".hl7MsgBox").textContent;