How to encode and decode a URL in JavaScript ?

Encoding and Decoding URI and URI components is a usual task in web development while making a GET request to API with query params. Many times construct a URL string with query params and in order to understand it, the response server needs to decode this URL. Browsers automatically encode the URL i.e. convert some special characters to other reserved characters and then make the request. For eg: The space character ” ” is either converted to + or %20.

Example:

• Open www.google.com and write a search query “geeks for geeks”.
• After search results appear, observe the browser’s URL bar. The browser URL will consist of %20 or + sign in place of space.
• The URL will be displayed like: https://www.google.com/search?q=geeks%20for%20geeks or https://www.google.com/search?q=geeks+for+geeks

Note: The browser converted the spaces into + or %20 signs automatically.

Encoding a URL: Encoding in Javascript can be achieved using:

• JavaScript encodeURI Function
• JavaScript encodeURIComponent() Function
• JavaScript escape() function

JavaScript encodeURI Function

The encodeURI() function is used to encode complete URI. This function encodes the special character except for (, / ?: @ & = + $ #) characters.

Syntax:

encodeURI( complete_uri_string );

Javascript

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

Output

https://www.google.com/search?q=geeks%20for%20geeks

JavaScript encodeURIComponent() Function

The encodeURIComponent() function is used to encode some parts or components of URI. This function encodes the special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #

Syntax:

encodeURIComponent( uri_string_component );

Javascript

const component = "geeks for geeks";
const encodedComponent = encodeURIComponent(component);
console.log(encodedComponent);

Output

geeks%20for%20geeks

JavaScript escape() function

This function takes a string as a single parameter & encodes the string that can be transmitted over the computer network which supports ASCII characters. Encoding is the process of converting plain text into ciphertext.

Syntax:

escape( string )

Note: The escape() function only encodes the special characters, this function is deprecated.

Exceptions: @ – + . / * _

Javascript

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

Output

https://www.google.com/search?q=geeks%20for%20geeks
<br>https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks

Decoding a URL: Decoding in Javascript can be achieved using

• JavaScript decodeURI() Function
• JavaScript decodeURIComponent() Function
• JavaScript unescape() Function

JavaScript decodeURI() Function

The decodeURI() function is used to decode URI generated by encodeURI().

Syntax:

decodeURI( complete_encoded_uri_string )

Example: This example describes the decodeURI() function of Javascript.

Javascript

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

Output

https://www.google.com/search?q=geeks for geeks

JavaScript decodeURIComponent() Function

The decodeURIComponent() function is used to decode some parts or components of URI generated by encodeURIComponent().

Syntax:

decodeURIComponent( encoded_uri_string_component )

Example: This example describes the decodeURIComponent() of Javascript.

Javascript

const component = "geeks%20for%20geeks"
const decodedComponent = decodeURIComponent(component);
console.log(decodedComponent)

Output

geeks for geeks

JavaScript unescape() Function

This function takes a string as a single parameter and uses it to decode that string encoded by the escape() function. The hexadecimal sequence in the string is replaced by the characters they represent when decoded via unescape() function.

Syntax:

unescape(string)

Note: This function only decodes the special characters, this function is deprecated.

Exceptions: @ – + . / * _

Javascript

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

Output

https://www.google.com/search?q=geeks%20for%20geeks
https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks
https://www.google.com/search?q=geeks for geeks
https://www.google.com/search?q=geeks for ...

Difference decodeURIComponent and decodeURI:

	decodeURIComponent	decodeURI
Definition	The decodeURIComponent() function is used to decode some parts or components of URI generated by encodeURIComponent().	Decoding in Javascript can be achieved using decodeURI function.
Syntax	decodeURIComponent( encoded_uri_string_component )	decodeURI( complete_encoded_uri_string )
Special Character Encoding	It takes encodeURIComponent(url) string so it can decode these characters.	It takes encodeURI(url) string so it cannot decoded characters (, / ? : @ & = + $ #)
Example	decodeURIComponent(“%41”) It returns “A” decodeURIComponent(“%26”): It returns “&”	decodeURI(“%41”): It returns “A” decodeURI(“%26”): It returns “%26”