URL stands for Uniform Resource Locator. It is the address of a website, image, document, API and other resources. A URL consists of several components such as the protocol type (i.e. HTTP or HTTPS), domain name, path, operational parameters and also data.
URL encoding means converting the special characters of the URL into a standardized format and making it percent encoded so that it can be transferred securely and understood by every web browser and server.
Functions to Encode URL
Let’s see them one by one.
This function takes a URL or URI as a string and encodes it including individual query parameters and fragments, except for the reserved characters below.
Excluded Characters: A–Z a–z 0–9 – _ . ! ~ * ‘ ( )
where url is a string to be encoded as a URL component.
const url = "https://www.example.com/?param=value¶m2=value2"; const encodedURL = encodeURIComponent(url); console.log(encodedURL);
This function encodes a URL or URI excluding the domain or protocol. It encodes the entire URL or larger portions of a URL including special characters except for the following given below.
Excluded Characters: A–Z a–z 0–9 – _ . ! ~ * ‘ ( ) ; / ? : @ & = + $ , #
where url is a string to be encoded as a URL.
const url = "https://www.example.com/?param=value¶m2=value2"; const encodedURL = encodeURI(url); console.log(encodedURL);
Decoding, as the name suggests, is the reverse process of encoding. This means converting an encoded or percent encoded URL or URI back to its original form.
Functions to Decode URL
Let’s see them one by one.
The decodeURIComponent() function can be used to decode only those components of a URI that have been encoded using encodeURIComponent() function. If you used the encodeURI() function to encode a URI, then to decode it you must use the decodeURI() function.
where encodedURI is a URI encoded using encodeURIComponent() function.
const encodedURL = "https%3A%2F%2Fwww.example.com%2F%3Fparam%3Dvalue%26param2%3Dvalue2"; const decodedURL = decodeURIComponent(encodedURL); console.log(decodedURL);
This function is used to decode a URL or URI that has been encoded using percent encoding or encodeURI().
where encodedURI is an encoded URI to be decoded.
const encodedURL = "https://www.example.com/?param=value¶m2=value2"; const decodedURL = decodeURI(encodedURL); console.log(decodedURL);
If you don’t have a specific requirement and just want to encode the URL or URI before transmitting it to the web, you can use encodeURI(), but remember, if you only want to encode specific components of the URL, such as query parameters, you should use the encodeURIComponent() functions.
Same way, if the URL or URI is encoded using the encodeURI() function, you should use decodeURI() to properly decode it and if specific components are encoded using the encodeURIComponent() function, you should use decodeURIComponent() to decode those specific components.
We hope you have enjoyed reading the material, if you still have problems, see the MDN docs below given for all four functions.