URL encoding is the process of converting a string into a valid URL format. URL encoding is required because URLs can only be sent over the internet using the ASCII character-set. URL encoding replaces all non-ASCII characters with a "%" followed by hexadecimal digits.
JavaScript provides two methods to encode and decode URLs, namely encodeURI() and encodeURIComponent(). In this article, we will discuss how to make use of these methods to encode URLs.
Encoding and Decoding URLs
URL encoding is important when dealing with special characters in a URL. Special characters, such as spaces, exclamation marks, and so on, cannot be used in a URL. Therefore, they must be encoded before being used in a URL.
For example, if we want to pass the following string in a URL https://google.com/search?q=GoLinuxCloud Tutorial, we need to encode the space between 'GoLinuxCloud' and 'Tutorial'. The encoded string will look like this: https://google.com/search?q=GoLinuxCloud%20Tutorial.
In this example, the space is replaced with %20. This is known as percent-encoding.
Method-1: Using encodeURI()
The encodeURI() method is used to encode a complete URL. This method does not encode special characters that have a specific meaning in a URL, such as slashes, ampersands, and question marks.
Before we go into
encodeURI(uri)
The uri parameter is the URL to be encoded. Now that we have the syntax, let’s encode google search query URL using the encodeURI() method.
const url = "<https://google.com/search?q=GoLinuxCloud> JavaScript Tutorial";
const encodedUrl = encodeURI(url);
console.log(encodedUrl);
Output
https://google.com/search?q=GoLinuxCloud%20JavaScript%20Tutorial
In this example, we pass the url to the encodeURI() method, which returns the encoded URL.
In another example, we have the & character within the URL. In this example, the & character is not encoded because it has a specific meaning in a URL.
const url = "<https://www.golinuxcloud.com/search?q=JavaScript&Go>";
const encodedUrl = encodeURI(url);
console.log(encodedUrl);
Output
<https://www.golinuxcloud.com/search?q=JavaScript&Go>
Method-2: Using encodeURIComponent()
The encodeURIComponent() method is used to encode a part of a URL. This method encodes all special characters, including those that have a specific meaning in a URL, such as slashes, ampersands, and question marks.
The syntax for the encodeURIComponent() method can be seen below
encodeURIComponent(uriComponent)
The uriComponent parameter is the part of the URL to be encoded. Now, let’s go through some examples. For our first examples, we will encode a search query that has whitespaces between words.
const searchQuery = "JavaScript Tutorial";
const encodedSearchQuery = encodeURIComponent(searchQuery);
const url = `https://google.com/search?q=${encodedSearchQuery}`;
console.log(url);
Output
https://google.com/search?q=JavaScript%20Tutorial
In this example, we encode only the search query and use it to create a complete URL. For the next example, the & character is encoded because it is part of the search query.
const searchQuery = "JavaScript & React";
const encodedSearchQuery = encodeURIComponent(searchQuery);
const url = `https://www.golinuxcloud.com/search?q=${encodedSearchQuery}`;
console.log(url);
Output
https://www.golinuxcloud.com/search?q=JavaScript%20%26%20React
Summary
URL encoding is an important concept when working with URLs. JavaScript provides two methods, encodeURI() and encodeURIComponent(), to encode and decode URLs. First, the encodeURI() encodes a complete URL and does not encode special characters that have a specific meaning in a URL. While the encodeURIComponent() encodes a part of a URL and encodes all special characters, including those that have a specific meaning in a URL
References
encodeURI() - JavaScript | MDN (mozilla.org)
encodeURIComponent() - JavaScript | MDN (mozilla.org)
