Thursday 15 February 2018

Copy DOM content to the clipboard with pure Javascript

Of all the tips on the internet on how to copy data from a DOM element to the clipboard, I compiled my own function(s).

The examples below are to copy the 'href'-part of  a link to an RSS feed to the clipboard.

1. By class name, use the first found element
function copyToClipboardCN(element, attr) {
 x = document.getElementsByClassName(element);
 if(x !== undefined && x !== null && x[0] !== undefined) {
  var textarea = document.createElement("textarea");
  document.body.appendChild(textarea);
  textarea.value = x[0][attr];
  textarea.select();
  var status = document.execCommand('copy');
  textarea.remove();
 }
}

2. By id
function copyToClipboardID(element, attr) {
 x = document.getElementById(element);
 if(x !== undefined && x !== null) {
  var textarea = document.createElement("textarea");
  document.body.appendChild(textarea);
  textarea.value = x[attr];
  textarea.select();
  var status = document.execCommand('copy');
  textarea.remove();
 }
}

RSS feed link example with a class and an ID, using FontAwesome icons :

<a class="blog-rss-link" href="https://macvos.blogspot.com/feeds/posts/default" rel="alternate" target="_blank" title="RSS Feed" type="application/rss+xml"><i class="fa fa-rss"> RSS Feed <i class="fa fa-copy" onclick="copyToClipboardCN('blog-rss-link', 'href')" style="cursor: pointer;" title="Copy RSS link to clipboard">

<a id="blog-rss-link" href="https://macvos.blogspot.com/feeds/posts/default" rel="alternate" target="_blank" title="RSS Feed" type="application/rss+xml"><i class="fa fa-rss"> RSS Feed <i class="fa fa-copy" onclick="copyToClipboardID('blog-rss-link', 'href')" style="cursor: pointer;" title="Copy RSS link to clipboard">

I have thought about combining the two functions into one, but i find that dangerous. In case you don't, here it is:
function copyToClipboard(element, attr) {
 var x = document.getElementById(element);
 if(x === undefined || x === null) {
  x = document.getElementsByClassName(element);
  if(x !== undefined && x !== null && x[0] !== undefined) {
   x = x[0];
  }
  else {
   x = undefined;
  }
 }
 if(x !== undefined) {
  var textarea = document.createElement("textarea");
  document.body.appendChild(textarea);
  textarea.value = x[attr];
  textarea.select();
  var status = document.execCommand('copy');
  textarea.remove();
 }
}