Copy highlighted code to the clipboard

Allowing users to copy sample code is a common thing in the web development nowadays.
To demonstrate the implementation, we create two elements:

<pre id="sampleCode"><code>...</code></pre>
<button id="copyButton">Copy</button>

The sampleCode element contains the sample code which is already highlighted.

Copying the sample code to the clipboard could consist of three steps:

  • Select the text content of the code element
  • Copy it to the clipboard using the document.execCommand('copy') function
  • Last but not least, both the steps above have an effect on the text selection.

So we have to backup the current selected text before copying, and restore it at the end.

You can see the code in the demo below. Enjoy!



Clone an element
Count the number of characters of a textarea