JavaScript URL Encode

In this article, we will explore the concept of URL encoding in JavaScript.

URL encoding refers to the process of transforming characters in a URL into a format suitable for transmission across the internet.

URL decoding refers to the process of reverting an encoded URL to its initial representation. It is crucial to both encode and decode the URL of a website to ensure accessibility for the user. This encoding and decoding procedure in web development occurs when a GET request is dispatched along with the query parameters to the API.

Certain web browsers automatically encode URLs by transforming specific special characters into alternative representations.

For instance, a space character " " is encoded as 20% or +.

Encoding the URL

We can do encoding of the URL by utilizing the following methods:

• ✅ Utilizing the JavaScript encodeURI function
• ✅ Utilizing the JavaScript encodeURIComponent function
• ✅ Utilizing the JavaScript escape function

JavaScript the encodeURI function

This function serves the purpose of encoding the complete URL of any given website. It is capable of encoding special characters, with the exception of these specific characters: / ? @ , = & + $ #

.Syntax:

encodeURI(entire_uri_string);

Demo:

In the provided demonstration, we will employ the encodeURI function to transform the URL.

Code:

const url = "https://www.google.com/search?q=hello world";
const encodedURL = encodeURI(url);
console.log(encodedURL);

Output:

In the following output, it is evident that the space character has been substituted with a %20.

JavaScript the encodeURlComponent function

This function is employed to encode specific segments of a website's URL. It is capable of encoding special characters and can also encode these particular characters: / ? @ , = & + $ #

Syntax:

encodeURIComponent(uri_string_component);

Demo:

In the following demonstration, we will employ the encodeURIComponent function to transform the URL.

Code:

const part = "Hello World";
const encodedPart = encodeURIComponent(part);
console.log(encodedPart);

Output:

In the output displayed below, we can observe that the space character has been substituted with %20.

JavaScript the escape function

The escape function is employed to encode a string. It requires the string as a single argument for transmission across the internet, which is compatible with ASCII characters.

Syntax:

escape(string)

Demo:

In the following demonstration, we will employ the escape function to transform the URL.

Code:

const url = "https://www.google.com/search?q=hello world";
const encodedURL = encodeURI(url);// encoding utilizing encodeURI
console.log(encodedURL)
console.log("" + escape(url)); //encoding utilizing escape

Output:

In the output displayed below, it is evident that the website's URL has been encoded, indicating that the character "%20" has been substituted with a space character.

Decoding the URL

Following are the ways which we can utilize to decode the URL of any website:

• ✅ Utilizing the JavaScript decodeURI Function
• ✅ Utilizing the JavaScript decodeURIComponent Function
• ✅ Utilizing the JavaScript unescape Function

JavaScript the decodeURI Function

The decodeURI function is employed to interpret the URL of a website that has been encoded using the encodeURI method.

Syntax:

decodeURI(entire_encoded_uri_string)

Demo:

In the following demonstration, we will employ the decodeURI function to interpret and decode the specified URL.

Code:

const url = "https://www.google.com/search?q=java%20t%20point";
const decodedURL = decodeURI(url);
console.log(decodedURL);

Output:

Below is the output where we can observe the decoding of the URL.

JavaScript the decodeURIComponent Function

The decodeURIComponent method is employed to decode specific segments of a URL that have been encoded using the encodeURIComponent function.

Syntax:

decodeURIComponent(encoded_uri_string_component)

Demo:

In the following demonstration, we will employ the decodeURIComponent function to decode the URL associated with any website.

Code:

const part = "java%20t%20point"
const decodedPart = decodeURIComponent(part);
console.log(decodedPart);

Output:

It is evident that certain segments of the URL have been substituted with a space character.

JavaScript the unescape Function

The unescape function serves the purpose of decoding a given string. It requires one parameter, which is the string meant for transmission across the internet, adhering to ASCII character standards. This function is responsible for decoding URLs that have been encoded using the escape function.

Syntax:

unescape(string)

Demo:

We will employ the unescape function to interpret the URL of the website.

Code:

const url = "https://www.google.com/search?q=hello world";
const encodedURL = encodeURI(url);
console.log(encodedURL);	
console.log(escape(url));
console.log(decodeURI(encodedURL));
console.log(unescape(encodedURL));

Output:

The output presented below demonstrates that the URL has been decoded.

Conclusion:

In this article, we have explored the concept of URL encoding in JavaScript. We have learned that the URL of any given website can be encoded using the JavaScript functions encodeURI, encodeURIComponent, and escape. Additionally, we have recognized that the decoding of a website's URL can be achieved through the use of the JavaScript functions decodeURI, decodeURIComponent, and unescape.