How to encode and decode a URL in JavaScript ?
Encoding and decoding URLs in JavaScript is essential for web development, especially when making GET requests with query parameters. This process ensures special characters in URLs are correctly interpreted by the server. For instance, spaces are converted to %20 or + in URLs. This guide covers how to use JavaScript functions like encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent(), and unescape() for effective URL encoding and decoding.
Example:
- Open www.google.com and write a search query “Beginner for Beginner”.
- 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=Beginner%20for%20Beginner or https://www.google.com/search?q=Beginner+for+Beginner
Note: The browser converted the spaces into + or %20 signs automatically.
Encoding a URL: Encoding in Javascript can be achieved using:
Table of Content
- 1. JavaScript encodeURI Function
- 2. JavaScript encodeURIComponent() Function
- 3. JavaScript escape() function
- 1. JavaScript decodeURI() Function
- 2. JavaScript decodeURIComponent() Function
- 3. JavaScript unescape() Function
- 4. JavaScript querystring Module
1. 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 );
const url = "https://www.google.com/search?q=Beginner for Beginner";
const encodedURL = encodeURI(url);
console.log(encodedURL)
Output
https://www.google.com/search?q=Beginner%20for%20Beginner
2. 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 );
const component = "Beginner for Beginner";
const encodedComponent = encodeURIComponent(component);
console.log(encodedComponent);
Output
Beginner%20for%20Beginner
3. JavaScript escape() function
JavaScript escape() 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: @ – + . / * _
const url = "https://www.google.com/search?q=Beginner for Beginner";
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=Beginner%20for%20Beginner <br>https%3A//www.google.com/search%3Fq%3DBeginner%20for%20Beginner
Decoding a URL
Decoding in Javascript can be achieved using
1. 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.
const url = "https://www.google.com/search?q=Beginner%20for%20Beginner";
const decodedURL = decodeURI(url);
console.log(decodedURL)
Output
https://www.google.com/search?q=Beginner for Beginner
2. 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.
const component = "Beginner%20for%20Beginner"
const decodedComponent = decodeURIComponent(component);
console.log(decodedComponent)
Output
Beginner for Beginner
3. 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: @ – + . / * _
const url = "https://www.google.com/search?q=Beginner for Beginner";
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=Beginner%20for%20Beginner https%3A//www.google.com/search%3Fq%3DBeginner%20for%20Beginner https://www.google.com/search?q=Beginner for Beginner https://www.google.com/search?q=Beginner for ...
4. JavaScript querystring Module
The querystring module provides utilities for parsing and formatting URL query strings. It can be used to encode and decode URL components.
Encoding a URL:
To encode a URL, we can use the querystring.stringify() function to create a query string from an object and then use encodeURIComponent() to encode the resulting string.
const querystring = require('querystring');
const urlParams = {
q: 'Beginner for Beginner',
page: 1,
sort: 'desc'
};
const encodedURL = 'https://www.google.com/search?' + querystring.stringify(urlParams);
console.log(encodedURL);
Output:
https://www.google.com/search?q=Beginner%20for%20Beginner&page=1&sort=desc
Decoding a URL:
To decode a URL, we can use the querystring.parse() function to parse the query string into an object and then access the decoded values.
const decodedParams = querystring.parse('q=Beginner%20for%20Beginner&page=1&sort=desc');
console.log(decodedParams.q); // Output: Beginner for Beginner
console.log(decodedParams.page); // Output: 1
console.log(decodedParams.sort); // Output: desc
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” |
URL encoding and decoding in JavaScript is crucial for seamless web development. By using functions such as encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent(), and unescape(), developers can ensure their URLs are properly formatted and readable by servers. This skill is essential for handling query parameters in GET requests and ensures a smooth user experience on your website.