Open In App

JavaScript encodeURI(), decodeURI() and its components Functions

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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

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

Syntax:

encodeURI( complete_uri_string )

Parameters: This function accepts a single parameter.

  • complete_uri_string: It is used to hold the URL to be encoded. 

Return Value: This function returns the encoded URI. 

Example: In this example, we will see a basic example of encoding 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

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 )

Parameters:: This function accepts a single parameter 

  • uri_string_component: It is used to hold the string which needs to be encoded. 

Return Value: This function returns the encoded string. 

Example: In this example, we will see how to encode a string usingencodeURIComponent().

javascript




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


Output:

geeks%20for%20geeks

Java Script 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: It holds the encoded string. 

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

Example: In this example, we will see the use of decodeURI().

javascript




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


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 the URI generated by encodeURIComponent(). 

Syntax:

decodeURIComponent( encoded_uri_string_component )

Parameters: This function accepts a single parameter 

  • encoded_uri_string_component: It holds the encoded string. 

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

Example: In this example, we will see how to decode a URI string using decodeURIComponent().

javascript




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


Output:

geeks for geeks

Applications:

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

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.



Last Updated : 05 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads