- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to encode and decode a URL in JavaScript?
Encoding and decoding the URI and the URI components is required by the URL of any website to reach or redirect the user. It is a usual task in web development, and this is generally done while making a GET request to the API with the query params. The query params must also be encoded in the URL string, where the server will decode this. Many browsers automatically encode and decode the URL and the response string.
E.g., A space " " is encoded as a + or %20.
Encoding a URL
The conversion of the special characters can be done by using the following method from JavaScript −
encodeURI() function − The encodeURI() function is used for encoding the complete URI, i.e., converting the special characters from the URI into browser understandable language. Some of the characters that are not encoded are: (, / ? : @ & = + $ #).
encodeURIComponent() function − This function encodes the whole URL instead of just the URI. The component encodes the domain name also.
Syntax
encodeURI(complete_uri_string ) encodeURIComponent(complete_url_string )
Parameter
complete_uri_string string − It holds the URL to be encoded.
complete_url_string string − It holds the complete URL string to be encoded.
The above functions return the encoded URL.
Example 1
In the below example, we encode a URL using encodeURI() and encodeURIComponent() methods.
# index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Encoding URI</title> </head> <body> <h1 style="color: green;"> Welcome To Tutorials Point </h1> <script> const url="https://www.tutorialspoint.com/search?q=java articles"; document.write('<h4>URL: </h4>' + url) const encodedURI=encodeURI(url); document.write('<h4>Encoded URL: </h4>' + encodedURI) const encodedURLComponent=encodeURIComponent(url); document.write('<h4>Encoded URL Component: </h4>' + encodedURLComponent) </script> </body> </html>
Output
Decoding a URL
The decoding of a URL can be done using the following methods −
decodeURI() function − The decodeURI() function is used to decode the URI, i.e., converting the special characters back to the original URI language.
decodeURIComponent() function − This function decodes the complete URL back to its original form. The decodeURI only decodes the URI part, whereas this method decodes the URL, including the domain name.
Syntax
decodeURI(encoded_URI ) decodeURIComponent(encoded_URL
Parameter
encoded_URI URI − It takes input for the encoded URL created by the encodeURI() function.
encoded_URL URL − It takes input for the encoded URL created by the encodeURIComponent() function.
These functions will return the decoded format of the encoded URL.
Example 2
In the below example, we decode an encoded URL using decodeURI() and decodeURIComponent() methods into its original form.
# index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Encode & Decode URL</title> </head> <body> <h1 style="color: green;"> Welcome To Tutorials Point </h1> <script> const url="https://www.tutorialspoint.com/search?q=java articles"; const encodedURI = encodeURI(url); document.write('<h4>Encoded URL: </h4>' + encodedURI) const encodedURLComponent = encodeURIComponent(url); document.write('<h4>Encoded URL Component: </h4>' + encodedURLComponent) const decodedURI=decodeURI(encodedURI); document.write('<h4>Decoded URL: </h4>' + decodedURI) const decodedURLComponent = decodeURIComponent(encodedURLComponent); document.write('<h4>Decoded URL Component: </h4>' + decodedURLComponent) </script> </body> </html>
Output
- Related Articles
- How to encode a URL using JavaScript function?
- How to decode a URL using JavaScript function?
- How to Encode and Decode JSON and Lua Programming?
- Arduino – base64 encode and decode
- Encode and Decode Strings in C++
- How to URL encode a string (NSString) in iPhone?
- Encode and decode uuencode files using Python
- How can I encode a URL in Android?
- Encode and decode binhex4 files using Python (binhex)
- Encode and decode XDR data using Python xdrlib
- Encode and decode MIME quoted-printable data using Python
- What is the difference between encode/decode in Python?
- How to encode a string in JavaScript?
- Function to decode a string in JavaScript
- How to decode an encoded string in JavaScript?
