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

Question

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

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:

时得到新的输出

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

Uncaught TypeError: copyText.select is not a function ...

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

Answer 1

首先，一些参考：

The getElementsByClassName() method of Document interface returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

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

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

另一种可能是使用方法 querySelector():

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

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

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

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

const copyToClipBoard = (str) =>
{
    const el = document.createElement('textarea');
    el.value = str;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
};

document.querySelector(".btnCopy").addEventListener("click", function()
{
    var copyText = document.querySelector(".hl7MsgBox").textContent;

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

    copyToClipBoard(copyText);
});

<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>
<button class="btnCopy">Copy To Clipboard</button>
<br>
<textarea rows=8 cols=50 placeholder="Paste text here..."></textarea>

Answer 2

只需从 DIV 中获取文本并将其传递给此函数。

function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // IE specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text); 

    } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        } catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        } finally {
            document.body.removeChild(textarea);
        }
    }
}   

copyToClipboard('hello'); //hello

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

Copy text to clipboard from div with javascript

javascript

clipboard