How to Encode and Decode URL in JavaScript: Mastering 4 Essential Functions

How To Encode And Decode URL In JavaScript

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.

Encoding a URL in JavaScript is necessary to ensure its correct interpretation and to preserve data integrity because URLs sometimes contain parameters and data that can be kept reliably such as keys. Encoding can also help to normalise URLs. Normalization involves converting URLs into a standardized format, reducing redundancy and ensuring consistency. It also prevents security vulnerabilities such as injection attacks.

Basically, encoding and decoding URLs using JavaScript offers a number of features that make it necessary to implement. This tutorial will show how we can encode and decode URLs in Javascript using multiple functions.

Also Read: Scope In JavaScript – Block, Function, Local, and Global

Encoding a URL using JavaScript

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

Below are the functions to encode URLs using JavaScript:

  1. encodeURIComponent()
  2. encodeURI()

Let’s see them one by one.

encodeURIComponent()

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 – _ . ! ~ * ‘ ( )

Syntax:

encodeURIComponent(uri)

where url is a string to be encoded as a URL component.

Example:

const url = "https://www.example.com/?param=value&param2=value2";

const encodedURL = encodeURIComponent(url);

console.log(encodedURL);

Output:

https%3A%2F%2Fwww.example.com%2F%3Fparam%3Dvalue%26param2%3Dvalue2

encodeURI()

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 – _ . ! ~ * ‘ ( ) ; / ? : @ & = + $ , #

Syntax:

encodeURI(uri)

where url is a string to be encoded as a URL.

Example:

const url = "https://www.example.com/?param=value&param2=value2";

const encodedURL = encodeURI(url);

console.log(encodedURL);

Output:

https://www.example.com/?param=value&param2=value2

Decoding a URL using JavaScript

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

Below are the functions to decode URLs using JavaScript:

  1. decodeURIComponent()
  2. decodeURI()

Let’s see them one by one.

decodeURIComponent()

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.

Syntax:

decodeURIComponent(encodedURI)

where encodedURI is a URI encoded using encodeURIComponent() function.

Example:

const encodedURL = "https%3A%2F%2Fwww.example.com%2F%3Fparam%3Dvalue%26param2%3Dvalue2";

const decodedURL = decodeURIComponent(encodedURL);

console.log(decodedURL);

Output:

https://www.example.com/?param=value&param2=value2

decodeURI()

This function is used to decode a URL or URI that has been encoded using percent encoding or encodeURI().

Syntax:

decodeURI(encodedURI)

where encodedURI is an encoded URI to be decoded.

Example:

const encodedURL = "https://www.example.com/?param=value&param2=value2";

const decodedURL = decodeURI(encodedURL);

console.log(decodedURL);

Output:

https://www.example.com/?param=value&param2=value2

Summary

In this tutorial, we have looked at the importance of encoding a URL or URI and learned about several functions that JavaScript provides which take URLs as input to encode and decode them with their respective code examples.

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.

References

Aditya Gupta
Aditya Gupta
Articles: 161

Related Posts