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

Posted 2023-02-24

【中文标题】使用javascript将文本从div复制到剪贴板

【英文标题】：Copy text to clipboard from div with javascript

【发布时间】：2019-01-21 02:54:08

【问题描述】：

我正在尝试使用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 时获得新的输出：

1
2
3
4
5
6
7
8

但是，由于某种原因，它不起作用并抛出下一条错误消息：

未捕获的类型错误：copyText.select 不是函数...

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

【问题讨论】：

What do querySelectorAll and getElementsBy* methods return?的可能重复

Javascript - copy text string on click的可能重复

【参考方案1】：

首先，一些参考：

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

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

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

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

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

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

【讨论】：

仅供参考，更完整和通用的 copyToClipboard 功能可以在这里找到：hackernoon.com/…

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

【讨论】：

唯一对我有用的代码。很棒的东西@Diego Fortes