JavaScript URL Decoding Functions

JavaScript provides two functions for URL decoding: decodeURI() and decodeURIComponent().
In this guide, we'll compare their purposes and highlight the key differences between them.

URL Decoding Function Comparison

JavaScript provides two URL decoding functions: decodeURI() and decodeURIComponent().
The table below compares their purposes and usage in detail.

Comparison between JavaScript URL decoding functions: decodeURI() and decodeURIComponent()
Feature	`decodeURI()`	`decodeURIComponent()`
Purpose	Decodes an entire URI encoded with `encodeURI()`	Decodes a single URI component encoded with `encodeURIComponent()`
Typical Use Case	Used to decode a complete URI string	Used to decode individual values in a query string
Reserved and Special Characters	Preserves certain reserved and special characters (e.g., `#`)	Decodes all reserved and special characters
Common Use Cases	Handling full URLs or external links in browser environments	Decoding query parameters or processing user input

The following example demonstrates the difference between decodeURI() and decodeURIComponent() in JavaScript.

JavaScript

// Assign test strings to variables
const set1 = ";,/?:@&=+$"; // Note: output will vary depending on encoding method
const set2 = "-_.!~*'()";
const set3 = "#"; // Note: output will vary depending on encoding method
const set4 = "ABC abc 123";

// Encode the strings using encodeURI()
const encodedSet1 = encodeURI(set1);
const encodedSet2 = encodeURI(set2);
const encodedSet3 = encodeURI(set3);
const encodedSet4 = encodeURI(set4);

// Encode the strings using encodeURIComponent()
const encodedURIComponentSet1 = encodeURIComponent(set1);
const encodedURIComponentSet2 = encodeURIComponent(set2);
const encodedURIComponentSet3 = encodeURIComponent(set3);
const encodedURIComponentSet4 = encodeURIComponent(set4);

// Output the results
console.log("Encoded with encodeURI():");
console.log(encodedSet1); // ;,/?:@&=+$
console.log(encodedSet2); // -_.!~*'()
console.log(encodedSet3); // #

console.log("Encoded with encodeURIComponent():");
console.log(encodedURIComponentSet1); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodedURIComponentSet2); // -_.!~*'()
console.log(encodedURIComponentSet3); // %23

console.log("Decoded with decodeURI() (from encodeURI()):");
console.log(decodeURI(encodedSet1)); // ;,/?:@&=+$
console.log(decodeURI(encodedSet2)); // -_.!~*'()
console.log(decodeURI(encodedSet3)); // #

console.log("Decoded with decodeURI() (from encodeURIComponent()):");
console.log(decodeURI(encodedURIComponentSet1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(decodeURI(encodedURIComponentSet2)); // -_.!~*'()
console.log(decodeURI(encodedURIComponentSet3)); // %23

console.log("Decoded with decodeURIComponent() (from encodeURIComponent()):");
console.log(decodeURIComponent(encodedURIComponentSet1)); // ;,/?:@&=+$
console.log(decodeURIComponent(encodedURIComponentSet2)); // -_.!~*'()
console.log(decodeURIComponent(encodedURIComponentSet3)); // #

As shown in the output:

decodeURI() does not fully decode strings that were encoded with encodeURIComponent(), especially for reserved characters.
In contrast, decodeURIComponent() can safely decode strings that were encoded with encodeURIComponent(), including all reserved and special characters.

This behavior aligns with each function’s intended purpose:

decodeURI() is used to decode entire URIs, preserving certain reserved characters (like # or &) to maintain the URI structure.
decodeURIComponent() is used to decode individual URI components, where a complete and literal decoding is required—including all special characters.

Specifications

JavaScript URL Decoding Functions Specification
Specification
`decodeURI()`	ECMAScript Language Specification #sec-decodeuri-encodeduri
`decodeURIComponent()`	ECMAScript Language Specification #sec-decodeuricomponent-encodeduricomponent