How to copy the current URL to the clipboard with JavaScript?

Sometimes, we want to copy the current URL to the clipboard with JavaScript.

In this article, we’ll look at how to copy the current URL to the clipboard with JavaScript.

How to copy the current URL to the clipboard with JavaScript?

To copy the current URL to the clipboard with JavaScript, we can call navigator.clipboard.writeText with window.location.href.

For instance, we write:

<button>
  copy
</button>

to add a button.

Then we write:

const button = document.querySelector('button')
button.onclick = () => {
  navigator.clipboard.writeText(window.location.href);
}

We get the button with document.querySelector.

Then we set the button.onclick property to a function that calls navigator.clipboard.writeText with window.location.href.

window.location.href has the URL of the current page, so the URL will be copied to the clipboard with the copy button is clicked.

Conclusion

To copy the current URL to the clipboard with JavaScript, we can call navigator.clipboard.writeText with window.location.href.