从剪贴板中的多个 div 复制多个文本答案

【问题标题】：Copy multiple texts from multiple divs in clipboard从剪贴板中的多个 div 复制多个文本
【发布时间】：2020-09-07 09:20:14
【问题描述】：

所以我在 HTML 文件中嵌套了 div 标签。我试图从每个 div 标签中复制某些文本。经过几个小时的搜索，我终于找到了有效的solution。解决方法如下：

    <html>
        <body>
            <div id="a" onclick="copyDivToClipboard()"> Click to copy </div>
            <script>
                function copyDivToClipboard() {
                    var range = document.createRange();
                    range.selectNode(document.getElementById("a"));
                    window.getSelection().removeAllRanges(); // clear current selection
                    window.getSelection().addRange(range); // to select text
                    document.execCommand("copy");
                    window.getSelection().removeAllRanges();// to deselect
                }
            </script>
        </body>
    </html>

但由于它使用的是id，它只适用于第一个div。然后我将id 更改为class 但之前找到的解决方案不起作用。下面是我的 HTML 文件：

<div>
  <div onclick="copyTextToClipboard()">
    <span>My favorite actor is <span class="text_to_copy">Robert Downey, Jr.</span></span>
  </div>
  <div onclick="copyTextToClipboard()">
    <span>My favorite actor is <span class="text_to_copy">Tom Cruise</span></span>
  </div>
  <div onclick="copyTextToClipboard()">
    <span>My favorite actor is <span class="text_to_copy">Hugh Jackman</span></span>
  </div>
  <div onclick="copyTextToClipboard()">
    <span>My favorite actor is <span class="text_to_copy">Ryan Gosling</span></span>
  </div>
</div>

在对我找到的解决方案发表评论后，他建议我查看Range.setStart() 和Range.setEnd()。但我只是不知道如何应用这些，因为我对Javascript 比较陌生。

这几个span标签也被用于不同的样式类。

【问题讨论】：

如果我理解正确，您想复制 element 和 text_to_copy 类中的所有文本？
是的，你是对的

标签： javascript html copy paste

【解决方案1】：

我稍微修改了你的代码，请看一下，看看是否有帮助。

var elements = document.getElementsByClassName("parentDiv");

Array.from(elements).forEach(function(element) {
  element.addEventListener('click', copyTextToClipboard);
});

function copyTextToClipboard() {
  var selection = window.getSelection();
  var range = document.createRange();
  let dataToCopy = this.getElementsByClassName('text_to_copy');
  range.selectNodeContents(dataToCopy[0]);
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand("Copy");
  window.getSelection().removeAllRanges()
}

<html>

<body>
  <div>
    <div class="parentDiv">
      <span>My favorite actor is <span class="text_to_copy">Robert Downey, Jr.</span></span>
    </div>
    <div class="parentDiv">
      <span>My favorite actor is <span class="text_to_copy">Tom Cruise</span></span>
    </div>
    <div class="parentDiv">
      <span>My favorite actor is <span class="text_to_copy">Hugh Jackman</span></span>
    </div>
    <div class="parentDiv">
      <span>My favorite actor is <span class="text_to_copy">Ryan Gosling</span></span>
    </div>
  </div>
</body>

</html>

【讨论】：

谢谢。这完美地工作。在函数的最后一行 window.getSelection().removeAllRanges() 可以添加取消选择看起来不错的选择。