How to copy span, div, or other HTML element contents to clipboard using JQuery

In this blog, I provide examples of code I have written or used over the years. With each post, I provide the ability for you the user to copy the code contents to the clipboard so you can paste it into your page. This handy copy to clipboard logic enables you to copy the contents of the code block without having to select it first. Just click the copy hyperlink and the script does the rest.

I particularly like the example below because I can use it in my blog post without having to embed script in the post itself. I simply load a script function in the head tag of my pages and provide a structured link in the post body that identifies the span (or pre tag in my blog) that I want to copy. The script selects the range of data in the span, highlights it, copies it to the clipboard, then alerts the user the copy has completed.

The script monitors for a click event on all elements on the page with a name=”copy_pre”. All of our copy links are named “copy_pre”. Each link has a unique ID that matches the ID of the span we want to copy.

The copy script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script >
$(document).ready(function(){
	$("a[name=copy_pre]").click(function() {
		var id = $(this).attr('id');
		var el = document.getElementById(id);
		var range = document.createRange();
		range.selectNodeContents(el);
		var sel = window.getSelection();
		sel.removeAllRanges();
		sel.addRange(range);
		document.execCommand('copy');
		alert("Contents copied to clipboard.");
		return false;
	});
});
</script>

Copy Code

The HTML content to be copied and the links to copy it.

<div id="div_1">
	This is the first content we want to select and copy to the clipboard.
</div>
<a id="div_1" href="#" name="copy_pre">Copy Contents</a>
<div id="div_2">
	This is the second content we want to select and copy to the clipboard.
</div>
<a id="div_2" href="#" name="copy_pre">Copy Contents</a>

Copy Code

Click Here for a Working Example

References

JQuery
JQuery .ready
JQuery .attr
JavaScript getElementById
JavaScript createRange
JavaScript Range.selectNodeContents
JavaScript Window.getSelection
JavaScript Selection.removeAllRanges
JavaScript Selection.addRange
JavaScript Document.execCommand
JavaScript Window.alert