decodeURIComponent()

decodeURIComponent(encodedURIComponent)

Returns: string · Added in vES1 · Updated March 14, 2026 · Global Functions

javascript decodeuricomponent uri encoding url

The decodeURIComponent() function decodes a URI component that was encoded with encodeURIComponent(). Unlike decodeURI(), this function decodes all special characters including reserved characters like ?, #, /, and &.

Syntax

decodeURIComponent(encodedURIComponent)

Parameters

Parameter	Type	Description
`encodedURIComponent`	string	An encoded URI component.

Return Value

A new decoded string.

What decodeURIComponent() Decodes

This function decodes everything that encodeURIComponent() encodes:

decodeURIComponent("hello%20world");
// "hello world"

decodeURIComponent("a%2Fb%3Fc%3Dd");
// "a/b?c=d"

decodeURIComponent("test%40example.com");
// "test@example.com"

Examples

Decoding Query Parameters

// When you receive encoded query parameters
const queryString = "q%3Dhello%20world%26lang%3Den";
decodeURIComponent(queryString);
// "q=hello world&lang=en"

// Using with URLSearchParams
const params = new URLSearchParams("q=hello%20world");
params.get("q");
// "hello world"

Decoding Path Segments

const encodedPath = "my%20document.pdf";
decodeURIComponent(encodedPath);
// "my document.pdf"

Decoding API Responses

// When an API returns encoded data
const apiData = "%7B%22name%22%3A%22John%22%2C%22age%22%3A30%7D";
decodeURIComponent(apiData);
// "{\"name\":\"John\",\"age\":30}"

decodeURI vs decodeURIComponent

The key difference is what each function decodes:

// decodeURI preserves certain characters
decodeURI("%3F%26");
// "?&" - question mark and ampersand preserved

// decodeURIComponent decodes everything
decodeURIComponent("%3F%26");
// "?&" - decodes everything

// Example with slashes
decodeURI("%2F");
// "/" - preserved

decodeURIComponent("%2F");
// "/" - decoded

When to use each:

Use Case	Function
Decoding a full URI	`decodeURI()`
Decoding query parameter values	`decodeURIComponent()`
Decoding path segments	`decodeURIComponent()`
Decoding any encoded component	`decodeURIComponent()`

Common Mistakes

Using decodeURI for Query Parameter Values

// URL with query string
const url = "https://example.com/search?q=hello%20world";

// Using decodeURI on full URL - not ideal
decodeURI(url);
// "https://example.com/search?q=hello world" - works but not recommended

// Correct approach - extract and decode the component
const urlObj = new URL(url);
urlObj.searchParams.get("q");
// "hello world"

Not Handling Encoding at All

// DON'T - access the raw encoded value
const rawQuery = url.search;
// "q=hello%20world"

// DO - use URLSearchParams or decodeURIComponent
const query = decodeURIComponent(url.search.split("=")[1]);
// "hello world"