How to Encode URL in JavaScript? [SOLVED]


JavaScript

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)

 

Views: 14
Olorunfemi Akinlua

Olorunfemi Akinlua

He is boasting over five years of experience in JavaScript, specializing in technical content writing and UX design. With a keen focus on programming languages, he crafts compelling content and designs user-friendly interfaces to enhance digital experiences across various domains. You can connect with him on his LinkedIn profile.

Can't find what you're searching for? Let us assist you.

Enter your query below, and we'll provide instant results tailored to your needs.

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can send mail to admin@golinuxcloud.com

Thank You for your support!!

Leave a Comment