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

Last Updated : 17 Dec, 2024

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 #.

JavaScript

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.

JavaScript

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.

JavaScript

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.

JavaScript

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.