All posts

How to copy text from a collection of non input elements in JavaScript

This was something I built for the svg filter tool on this site.

The steps to accomplish this:

  • get the elements into a collection.
  • add the desired event listener.
  • copy the text to the users clipboard.

First, all of the elements need to share the same className so they can be queried for together. For this implementation I added the text that needed to be copied as a data attribute called data-css-snippet:

<code class="filter-css-code" data-tooltip-id="10" data-css-snippet="filter: brightness(0.5) sepia(1) hue-rotate(-200deg) saturate(5);">
  filter: brightness(0.5) sepia(1) hue-rotate(-200deg) saturate(5);
</code>

Then in JavaScript the elements can be accessed and transformed into an iterable collection using Array.from.

let filterSvgCodeSnippets = document.getElementsByClassName("filter-css-code");
filterSvgCodeSnippets = Array.from(filterSvgCodeSnippets);

Lastly add a click event to each element that copies the data-css-snippet. Start by iterating the collection using the map function, add the event using addEventListener("click", () => {}) and copies the text to the clipboard through navigator.clipboard.writeText(e.target.getAttribute("data-css-snippet"));. Below is the full example:

filterSvgCodeSnippets.map((snippet) => {
  snippet.addEventListener("click", (e) => {
    navigator.clipboard.writeText(e.target.getAttribute("data-css-snippet"));
  });
});