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);
Output
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);
Output
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);
Output
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);
Output
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:
| Function | Purpose | Encodes/Decodes |
|---|---|---|
| encodeURI() | Encodes a full URI, leaving URI delimiters (:, /, ?, &) intact | Encodes non-URI characters |
| decodeURI() | Decodes a full URI, reversing percent-encoding for non-URI characters | Decodes percent-encoded URI |
| encodeURIComponent() | Encodes individual URI components (query parameters, path segments) | Encodes all characters |
| decodeURIComponent() | Decodes individual URI components back into their original form | Decodes percent-encoded component |
- 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.
