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

The encodeURI() and decodeURI() functions in JavaScript are used to handle URI (Uniform Resource Identifier) encoding and decoding. They ensure that URIs are properly formatted for web usage, converting characters that may cause issues into a valid, encoded format.

1. encodeURI() Function

The encodeURI() function encodes a URI by replacing certain characters with their UTF-8 escape sequences. It preserves characters that are valid in a URI, like :, /, ?, and #.

let uri = "https://example.com/query?name=Amit Kumar&age=25";
let encoded = encodeURI(uri);
console.log(encoded);

https://example.com/query?name=Amit%20Kumar&age=25

encodeURI() converts the space in “Amit Kumar” into %20 but leaves the ?, =, and & characters intact, as they are part of the URI syntax.

2. decodeURI() Function

The decodeURI() function decodes an encoded URI by replacing escape sequences with their original characters.

let uri = "https://example.com/query?name=Amit%20Kumar&age=25";
let decoded = decodeURI(uri);
console.log(decoded);

https://example.com/query?name=Amit Kumar&age=25

decodeURI() converts the %20 back into a space, restoring the original URI.

encodeURIComponent() and decodeURIComponent()

In addition to encodeURI() and decodeURI(), JavaScript provides the encodeURIComponent() and decodeURIComponent() functions, which operate on individual components of a URI.

1. encodeURIComponent()

Encodes a URI component (such as query string parameters or path segments) and encodes characters like &, =, ?, and others.

let name = "Amit Kumar";
let encoded = encodeURIComponent(name);
console.log(encoded);

Amit%20Kumar

encodeURIComponent() encodes the space in “Amit Kumar” into %20, as it treats each component as part of a larger URI.

2. decodeURIComponent()

Decodes a URI component back into its original format.

let encoded = encodeURIComponent("Amit Kumar");
let decoded = decodeURIComponent(encoded);
console.log(decoded);

Amit Kumar

decodeURIComponent() decodes %20 back into a space, restoring the original string.

Advantages

• Ensures that special characters in a URI (e.g., spaces, @, &) are encoded into a format suitable for transmission over the web.
• Prevents unintended behavior caused by reserved characters.
• Simplifies the process of handling URLs in web applications, making it easier to pass data between the client and server.
• encodeURI() preserves query-related characters (?, #, &, /) while encoding others, making it suitable for encoding entire URLs.

Key Differences:

• Use encodeURI() and decodeURI() when dealing with full URIs, ensuring that the structure and syntax are preserved while encoding/decoding.
• Use encodeURIComponent() and decodeURIComponent() when working with individual URI components, such as query string parameters, to ensure special characters are properly encoded or decoded.