JavaScript | encodeURI(), decodeURI() and its components functions

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 consists %20 or + sign in place of space.
  • The URL will be display 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 to convert each them by hardcode will be tedious. JavaScript provide following functions to perform this task:

encodeURI()

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 single parameter complete_uri_string which is used to hold the URL to be encoded.

Return Value: This function returns the encoded URI.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

geeks%20for%20geeks

decodeURI()

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

Syntax:

decodeURI( complete_encoded_uri_string )

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

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


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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 single parameter encoded_uri_string_component which holds the encoded string.

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

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

geeks for geeks

Applications:

  • To convert space separated query params provided to API correctly.
  • In web scraping to decode URL’s query params to extract human-readable strings.


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.