Skip to content

How to encode a URL with JavaScript

New Courses Coming Soon

Join the waiting lists

You might need to encode a URL if you are sending it as part of a GET request, for example.

How do you encode a URL in JavaScript?

Depending on what you need to do, there are 2 JavaScript functions what will help you.

The first is encodeURI(), and the second is encodeURIComponent().

Note: you might read about escape(), but that is deprecated and should not be used.

Those 2 methods differ in which characters they do encode.

In details, encodeURI() does not encode ~!@#$&*()=:/,;?+ and encodeURIComponent() does not encode -_.!~*'(), encoding all the other characters. Why do they differ? Because they are meant for different uses:

If you were to call encodeURIComponent() on a full URL, since it does encode /, the URL path separators would be encoded as well (among other things):

encodeURI(" hey!/")
encodeURIComponent(" file with spaces.html")
// "!%2F"

MDN proposes an improvement to adhere to the RFC 3986 standard (, by implementing the following function:

const fixedEncodeURIComponent = (str) => {
  return encodeURIComponent(str).replace(/[!'()*]/g, (c) => {
    return '%' + c.charCodeAt(0).toString(16)

You call it for every single parameter that you’ll add to the URL.

The encodeURI() and encodeURIComponent() methods have a corresponding decodeURI() and decodeURIComponent() which does the opposite job which you can use on the backend if you use Node.js.

→ Get my JavaScript Beginner's Handbook
→ Read my JavaScript Tutorials on The Valley of Code
→ Read my TypeScript Tutorial on The Valley of Code

Here is how can I help you: