Difference Between encodeURI and encodeURIComponent in JavaScript

The encodeURI and encodeURIComponent functions are used to encode a URI by transforming characters that could otherwise cause issues when included in a URI. While both functions are used for encoding, they serve different purposes and encode different sets of characters. Understanding the differences between these two functions is essential for proper URI encoding in web applications.

What is encodeURI?

The encodeURI function in JavaScript encodes a complete URI (Uniform Resource Identifier). It preserves the URI structure by not encoding characters that have special meanings in a URI, such as :, /, ?, &, #, etc. This function is useful when you want to encode an entire URI without altering its structure.

Syntax:

encodeURI(URI)

Example: In the example, the space character in the query parameter is encoded as %20 but the ? and = characters are preserved.

encodeURI(URI)
let uri = "https://www.example.com/search?query=hello world";
let encodedURI = encodeURI(uri);
console.log(encodedURI);
// "https://www.example.com/search?query=hello%20world"

Output:

"https://www.example.com/search?query=hello%20world"

What is encodeURIComponent ?

The encodeURIComponent is a JavaScript function used to encode a URI component. It encodes all characters that are not allowed in a URI component, including :, /, ?, &, #, etc. This function is useful when you want to encode individual parts of a URI, such as query parameters, without preserving special characters.

Syntax:

encodeURIComponent(uriComponent)

Example: The example below shows the encodeURIComponent.

encodeURIComponent(uriComponent)
let queryParam = "hello world";
let encodedQueryParam = encodeURIComponent(queryParam);
console.log(encodedQueryParam);
// "hello%20world"

Output:

hello%20world

Difference Between encodeURI and encodeURIComponent

Conclusion

In summary, encodeURI is used for encoding an entire URI while preserving characters that have special meanings in the URI. In contrast, encodeURIComponent is used for encoding individual components of the URI, encoding all special characters. Knowing when to use each function is crucial for proper URI encoding and ensuring that your web applications handle URIs correctly.