Click to copy all elements of a specific class into the clipboard?

Question

I'm aware there are many solutions for a click to copy feature, one of the most popular seems to be clipboard.js but I have not found a solution that allows you to copy only elements that have a specific class.

For example:

<div class="wrapper">
   <div class="copytext">I want to copy this text</div>
   <div class="nocopytext">I don't want to copy this text</div>
   <div class="copytext">I also want to copy this text<div>
</div>
<button>Copy only classes with copytext</button>

How can I create my script to select all classes "copytext" and copy it to my clipboard but leave out anything else?

No idea whether this is doable. Workaround idea: 1. hide all the `nocopytext` elements 2. use clipboard.js to copy/cut 3. show the elements again — Pekka, Nov 22 '16 at 15:55
Possible duplicate of [How do I copy to the clipboard in JavaScript?](http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — pistou, Nov 22 '16 at 15:56
@pistou not really. The OP is arguably asking about something slightly more specific here. — Pekka, Nov 22 '16 at 15:57
@pistou that seems to only select the first class that shows up. — cgrouge, Nov 22 '16 at 16:05

score 5 · Accepted Answer · edited Jan 15 '21 at 08:43

5

Use the document.getElementsByClassName():

<div class="wrapper">
   <div class="copytext">I want to copy this text</div>
   <div class="nocopytext">I don't want to copy this text</div>
   <div class="copytext">I also want to copy this text<div>
</div>

<button onclick="copyText()">Copy only classes with copytext</button>
<div id="output"></div>

<script>

function copyText() {

  var outputText = "";
  var targets = document.getElementsByClassName('copytext');

  for( var i = 0; i < targets.length; i++ ) {
    outputText += targets[i].innerText;
  }

  var output = document.getElementById('output');
  output.innerText = outputText;
  var range = document.createRange();
  range.selectNodeContents(output);
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('copy');
  output.style.display = 'none';

}

</script>

edited Jan 15 '21 at 08:43

ib.

25,324
10
71
97

answered Nov 22 '16 at 16:31

Melvin Davis

241
1
4

Clever use of the output box, thank you! It works great. One thing, is there anyway to show the text being highlighted when clicked? As if you were click dragging to copy it yourself? – cgrouge Nov 22 '16 at 19:37
Actually, could I hide the original wrapper and show the output box? I tried adding that to the bottom of the script and couldn't get it to work https://jsfiddle.net/x5s8bhdx/ – cgrouge Nov 22 '16 at 19:56
at the end of the function put something like this, setTimeout(function(){output.innerText = ''; output.style.display = 'block';},100); Also add style property to the wrapper display:none; – Melvin Davis Nov 23 '16 at 04:35
I would want the wrapper to be hidden and only show the output div. I want people to see the text highlighted so they know it was copied. That just hides the output box – cgrouge Nov 24 '16 at 14:26

Click to copy all elements of a specific class into the clipboard?

1 Answers1