Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to encode and decode a URL in JavaScript ?

  • Last Updated : 26 Nov, 2021

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. it converts some special characters to other reserved characters and then makes the request. For eg: 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 %20 or + sign in place of space.
  • The URL will be displayed be like: https://www.google.com/search?q=geeks%20for%20geeks or https://www.google.com/search?q=geeks+for+geeks

Note: Browser converted the spaces into + or %20 sign automatically.

There are many other special characters and converting each of them by hardcode will be tedious. JavaScript provides the following functions to perform this task:
Encoding a URL: Encoding in Javascript can be achieved using

  • encodeURI function
  • escape()

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

Syntax:

encodeURI( complete_uri_string )

Parameters: This function accepts a single parameter complete_uri_string which is used to hold the URL to be encoded.

Return Value: This function returns the encoded URI.

Javascript




<script>
const url = "https://www.google.com/search?q=geeks for geeks";
const encodedURL = encodeURI(url);
document.write(encodedURL)
</script>

Output:

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

 encodeURIComponent(): 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 )

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.

Javascript




<script>
const component = "geeks for geeks"
const encodedComponent = encodeURIComponent(component);
document.write(encodedComponent)
</script>

Output:

geeks%20for%20geeks

Difference encodeURIComponenet and encodeURI:

 encodeURIComponentencodeURI
DefinitionThe encodeURIComponent() function is used to encode some parts or components of URIThe encodeURI() function is used to encode complete URI. 
SyntaxencodeURIComponent( uri_string_component )encodeURI( complete_uri_string )
Special Character Encoding This function encodes the special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #This function encode the special character except (, / ? : @ & = + $ #) characters.

2. 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 )

Parameters: This function accepts a single parameter:

Return value: Returns an encoded string.

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

Exceptions: @ – + . / * _

Javascript




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

Output:

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

Decoding a URL: Decoding in Javascript can be achieved using

  • decodeURI() function.
  • unescape() function.

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

Syntax:

decodeURI( complete_encoded_uri_string )

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

Return Value: This function returns the decoded string (original string).

Example:

Javascript




<script>
const decodedURL = decodeURI(url);
document.write(decodedURL)
</script>

Output:

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

decodeURIComponent()

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

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:

Javascript




<script>
const component = "geeks%20for%20geeks"
const decodedComponent = decodeURIComponent(component);
document.write(decodedComponent)      
</script>

Output:

geeks for geeks

Difference decodeURIComponent and decodeURI:

 decodeURIComponentdecodeURI
DefinitionThe decodeURIComponent() function is used to decode some parts or components of URI generated by encodeURIComponent().Decoding in Javascript can be achieved using decodeURI function.
SyntaxdecodeURIComponent( 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”

2. 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)

Parameters: This function accepts a single parameter:

  • string: This parameter holds the string that will be decoded.

Return value: Returns a decoded string.

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

Exceptions: @ – + . / * _

Javascript




<script>
const url = "https://www.google.com/search?q=geeks for geeks";
const encodedURL = encodeURI(url);
document.write(encodedURL)
document.write("<br>"+escape(url));
document.write("<br>"+decodeURI(encodedURL));
document.write("<br>"+unescape(encodedURL));
</script>

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 geeks

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!