Copy multiple texts from multiple divs in clipboard

Question

So I have nested div tags in the HTML file. I was trying to copy certain texts from each div tag. After searching for several hours finally I found the solution which worked. The solution below:

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

But since it was using id it was only working for first div. Then I changed id to class but then the solution found before was not working. My HTML file below:

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

After commenting on the solution I found, the he suggested me to check out Range.setStart() and Range.setEnd(). But I just can not figure out how to apply those since I am relatively new to Javascript.

Also those several span tags were used for different classes for styling.

If I understand correctly, you want to copy all the text inside the `element` with `text_to_copy` class? — bertdida, Sep 07 '20 at 09:55

Narkhede Tushar · Accepted Answer · 2020-09-07T11:18:07.000

I modified your code a bit please have a look, and see if this helps.

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>

Thanks. This works perfectly. In the last line of the function `window.getSelection().removeAllRanges()` may be added to deselect the selection which looks good to eye. — Farhan Bin Amin, Sep 07 '20 at 10:50

Copy multiple texts from multiple divs in clipboard

1 Answers1

Linked