URL Encoding in JavaScript

1. What Is the Difference Between URI and URL?
2. Encoding a URL Using encodeURI() Method in JavaScript
3. Encoding a URL Using encodeURIComponent() Method in JavaScript

A URL encoding is a process of encoding 8-bit characters inside the URL with % followed by a hexadecimal character. It is also known as percent-encoding since we are replacing the characters with a percent sign. A URL encoding can be done using almost any programming language, including JavaScript.

The reason behind encoding a URL is that a URL can contain only specific characters from the ASCII table. All the other characters present inside the URL need to be encoded to make the URL work correctly. The characters which need encoding in a URL are ':', '/', '?', '#', '[', ']', '@', '!', '$', '&', "'", '(', ')', '*', '+', ',', ';', '=', as well as '%'. For more information on these characters and their encoding form, you can visit this link.

What Is the Difference Between URI and URL?

Before moving forwards, let’s first get some understanding about URI and URL.

A Uniform Resource Identifier (URI) is used to identify a resource over the internet. In contrast, Uniform Resource Locator (URL) is something that helps you locate and reach that resource.

A URI can also be an identifier as well as a locator, whereas a URL can only be a locator. A URL comes under URI; therefore, they both sound a bit similar but have subtle differences between them.

For example, “facebook.com” is a URL because it takes where Facebook’s webpage is located whereas a nearby coffee shop can be a URI because you know where the coffee shop (which is a resource) is, and you also know how to get there (the path).

Encoding a URL Using encodeURI() Method in JavaScript

The encodeURI() method is one of the methods which can be used to encode a URL in JavaScript. This method can be used if you have a complete URL.

Let’s say we have a URL as https://en.wikipedia.org/[$q=english &language], and now let’s encode this URL using the encodeURI() method to see what output this method provides.

const URL = 'https://en.wikipedia.org/[$q=english &language]';
console.log(encodeURI(URL));

Output:

https://en.wikipedia.org/%5Bq=english%20&language%5D

Notice that this method has only encoding very few of the characters in a URL like a white space and square brackets.

This method will not encode the following special characters.

encodeURI() ` will not encode: ` ~!@#$ & * () =: /,;?+'

If you want to encode some of the other special characters, you can use the encodeURIComponent() method.

Encoding a URL Using encodeURIComponent() Method in JavaScript

The encodeURIComponent() method can also be used to encode a URL. This method can be used if you have only a part of a URL. As we have already seen, the encodeURI() method encodes very few characters, but if you want to encode some other characters too, you can use the encodeURIComponent() method.

Let’s take the same URL we took earlier and see what output we get when we use this method to encode the string.

const URL = 'https://en.wikipedia.org/[$q=english &language]';
console.log(encodeURIComponent(URL));

Output:

https%3A%2F%2Fen.wikipedia.org%2F%5B%24q%3Denglish%20%26language%5D

As you can see, this method has encoded most of the URL.

This method will not encode the following special characters.

encodeURIComponent() ` will not encode: ` ~! * ()'

Depending upon your requirements and usage, you can use any one or both of the above two methods to encode a URL in JavaScript.