Encoding and Decoding URL in JavaScript: How?

Introduction

Any website's URL requires encoding and decoding of the URI and its components in order to redirect or reach the user. It is a common operation in web development, and this is typically carried out while sending a GET request with the query parameters to the API. In the URL string, where the server will decode it, the query parameters must likewise be encoded. Numerous browsers automatically encrypt and decrypt the response string and URL.

E.g., A space " " is encoded as a + or %20.

Encoding a URL

The method from JavaScript below can be used to convert the special characters.

encodeURI() function

The encodeURI() function is used to encode the entire URI, translating the URI's special characters into language that a browser can understand. The following characters are among those that are not encoded: (, /?: @ & = + $ #).

Syntax:

encodeURI( complete_uri_string )

Parameters:The URL to be encoded is stored in the function's single parameter complete_uri_string, which is accepted.

Return Value: The encoded URI is returned by this function.

Example:

const url = "https://www.google.com/search?q=apple showroom";
const encodedURL = encodeURI(url);
document.write(encodedURL)

Output:

https://www.google.com/search?q=apple%20showroom

write your code here: Coding Playground

encodeURIComponent() function

Instead than only encoding the URI, the encodeURIComponent() function also encrypts the entire URL. The element also encodes the domain name.

Syntax:

encodeURIComponent( uri_string_component)

Parameters: This function accepts the single parameter uri_string_component which is used to hold the string which need to be encoded.

Return Value: This function returns the encoded string.

Example:

const component = "portfolio website"
const encodedComponent = encodeURIComponent(component);
document.write(encodedComponent)

Output:

portfolio%20website

write your code here: Coding Playground

Differences: encodeURIComponenet and encodeURI

	encodeURIcomponent	encodeURI
Definition	Some URI components or sections are encoded using the encodeURIComponent() function.	The full URI is encoded using the encodeURI() function.
Syntax	encodeURIComponent( uri_string_component )	encodeURI( complete_uri_string )
Special Character Encoding	The special characters are encoded using this function. It also encodes the characters listed below: , / ? : @ & = + $ #	With the exception of (, /?: @ & = + $ #) characters, this function encodes special characters.

escape() function

This function accepts a single parameter, a string, and encodes the string such that it can be sent over a network that can handle ASCII characters. The process of transforming plain text into ciphertext is known as encoding.

Syntax:

escape( string )

Parameters: There is only one parameter this function accepts

Returns an encoded string as its value.

Note that the deprecated escape() function only encodes special characters.

Exceptions include @ - +. / * .

Example:

const url = "https://www.google.com/search?q=apple showroom";
const encodedURL = encodeURI(url);// encoding using encodeURI
document.log(encodedURL)
document.log("<br>"+escape(url)); //encoding using escape

Output:

https://www.google.com/search?q=apple%20showroom
https%3A//www.google.com/search%3Fq%3Dapple%20showroom

write your code here: Coding Playground

Decoding a URL

Decoding in Javascript can be achieved using

decodeURI() function

The URI generated by encodeURI is decoded using the decodeURI() method ().

Syntax:

decodeURI( complete_encoded_uri_string )

Parameters: This function accepts a single parameter complete_encoded_uri_string which holds the encoded string.

Return Value: The decoded string is returned by this function (original string)

Example:

Output:

https://www.google.com/search?q=apple showroom

write your code here: Coding Playground

decodeURlComponent() function

To decode some portions or components of the URI created by encodeURIComponent, use the decodeURIComponent() function ().

Syntax:

decodeURIComponent(encoded_uri_string_component)

Parameters: This function accepts a single parameter encoded_uri_string_component which holds the encoded string.

Return Value: This function returns the decoded component of the URI string.

Example:

Output:

apple showroom chennai

write your code here: Coding Playground

Differences: decodeURIComponenet and decodeURI

	decodeURIComponent	decodeURI
Definition	To decode some portions or components of the URI created by encodeURIComponent, use the decodeURIComponent() function ().	The decodeURI method in Javascript can be used to decode.
Syntax	decodeURIComponent( encoded_uri_string_component )	decodeURI( complete_encoded_uri_string )
Special character encoding	For the purpose of decoding these characters, it accepts the encodeURIComponent(url) string.	Because it uses the encodeURI(url) string, characters like (, /?: @ & = + $ #) cannot be decoded.

unescape() function

This function uses a single parameter, a string, to decode a string that has been encoded by the escape() function. When the hexadecimal sequence in the string is decoded using the unescape() method, the characters it represents take its place.

Syntax:

unescape(string)

Parameters: There is only one parameter this function accepts

string: The string to be decoded is contained in this parameter.

Returns a decoded string as the return value.

Note: This function is no longer supported; it only decodes special characters.

Exceptions include @ - +. / * .

Example:

Output:

https://www.google.com/search?q=apple%20showroom
https%3A//www.google.com/search%3Fq%3Dapple%20showroom
https://www.google.com/search?q=apple showroom
https://www.google.com/search?q=apple showroom

write your code here: Coding Playground

Conclusion

In this article, we understood various methods to encode and decode URL in javascript.