DEV Community

Cover image for simple-copy.js a tiny lib for copy text and DOM
Guilherme Nascimento
Guilherme Nascimento

Posted on

1

simple-copy.js a tiny lib for copy text and DOM

I've used some great clipboard libs, however I found that occasionally most of the things I needed were something simple, I noticed this when seeing the work of other developers, who instead of using a lib made use of the basics that the API for browsers provides, the document.execDocument() (although considered obsolete).

What I realized is that a big problem (at least for me) is that although libraries are small and make use of Gzip compression, on servers disabled for this feature it ended up being something that should weigh on average ~2KB ended up becoming ~10KB (I mean separate libs), I understand perfectly that there are compression and minification strategies (which I always use) and even some "lazyload" feature, but in this process I needed something that was light, without depending on much planning.

I admit that at the beginning I didn't think about sharing the lib prototype, but it was interesting enough, when used on servers with GZip enabled, lib got ~1,2KB, when GZip disabled it got ~2,5KB, that is, that is, a minimal difference (~1KB).

I am working so that the lib in the future will use ClipboardAPI while maintaining backward compatibility for older browsers.

Configure

You can use CDN (jsdelivr) and put directly in your page:

<script src="https://cdn.jsdelivr.net/npm/simple-copy.js@0.5/simple-copy.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Can download from source: https://github.com/brcontainer/simple-copy.js/blob/0.5.2/simple-copy.min.js

Can too install using npm:

npm i simple-copy.js
Enter fullscreen mode Exit fullscreen mode

And use with require():

const SimpleCopy = require('simple-copy.js');
Enter fullscreen mode Exit fullscreen mode

Or use with ECMAScript modules:

import SimpleCopy from 'simple-copy.js'
Enter fullscreen mode Exit fullscreen mode

Usage

Copying content from a element using selector:

SimpleCopy.copy("<selector>");
Enter fullscreen mode Exit fullscreen mode

Copying text from a element using selector:

SimpleCopy.copy("<selector>", { "text": true });
Enter fullscreen mode Exit fullscreen mode

Copying entire element using selector:

SimpleCopy.copy("<selector>", { "node": true });
Enter fullscreen mode Exit fullscreen mode

Copying content from a element using selector:

var element = document.querySelector(".foobar");
SimpleCopy.copy(element);
Enter fullscreen mode Exit fullscreen mode

Copying text from a element using selector:

var element = document.getElementById("idelement");
SimpleCopy.copy(element, { "text": true });
Enter fullscreen mode Exit fullscreen mode

Copying entire element:

var element = document.getElementsByClassName("<class>");
SimpleCopy.copy(element[0], { "node": true });
Enter fullscreen mode Exit fullscreen mode

Select text in a element using selector:

SimpleCopy.select("<selector>");
Enter fullscreen mode Exit fullscreen mode

Select content in a element:

var element = document.querySelector(".foobar");
SimpleCopy.select(element);
Enter fullscreen mode Exit fullscreen mode

Select entire node:

var element = document.querySelector(".foobar");
SimpleCopy.select(element, { "node": true });
Enter fullscreen mode Exit fullscreen mode

Set text in clipboard:

SimpleCopy.data("Hello, world!");
Enter fullscreen mode Exit fullscreen mode

Copy content from element defined in data attributes:

<button data-simplecopy-target="<selector>">Copy</button>
Enter fullscreen mode Exit fullscreen mode

Copy entire element defined in data attributes:

<button data-simplecopy-target="<selector>" data-simplecopy-node="true">Copy</button>
Enter fullscreen mode Exit fullscreen mode

Select content from element defined in data attributes:

<button data-simplecopy-target="<selector>" data-simplecopy-select="true">Select text</button>
Enter fullscreen mode Exit fullscreen mode

Copy html content without format:

<button data-simplecopy-target="<selector>" data-simplecopy-text="true">Copy</button>
Enter fullscreen mode Exit fullscreen mode

Set text in clipboard by data attribute:

<button data-simplecopy-data="Hello, world!">Copy text</button>
Enter fullscreen mode Exit fullscreen mode

Browser Support

Chrome Firefox Opera Edge Safari IE9+
10+ ✔ 9+ ✔

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay