Definition and Usage

The decodeURIComponent() function is used to decode a URL that was encoded using encodeURIComponent().

It decodes only the special characters encoded by encodeURIComponent().

Features

  • The encodeURIComponent() function safely encodes characters so they can be used as part of a URI.
  • In contrast, the decodeURIComponent() function takes a string that was encoded with encodeURIComponent() and decodes it by reversing the escape sequences, returning the original value.

Basic Example

JavaScript 
const originalURL = "https://www.example.com/search?q=JavaScript & Web Development";
const encodedURL = encodeURIComponent(originalURL);

console.log(encodedURL);
// Output: "https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3DJavaScript%20%26%20Web%20Development"

const decodedURL = decodeURIComponent(encodedURL);

console.log(decodedURL);
// Output: "https://www.example.com/search?q=JavaScript & Web Development"

The decodeURIComponent() function has the following syntax:

Syntax

JavaScript 
decodeURIComponent(encodedURI)

Parameters

Description of the decodeURIComponent() function parameter
encodedURI The encoded URI string to be decoded.

Return value

Returns a new string representing the decoded version of the given encodedURI.

Example

JavaScript 
const originalURL = "https://www.example.com/page?query=hello world";
const encodedURL = encodeURIComponent(originalURL);

console.log(encodedURL);
// Output: "https%3A%2F%2Fwww.example.com%2Fpage%3Fquery%3Dhello%20world"

const decodedURL = decodeURIComponent(encodedURL);

console.log(decodedURL);
// Output: "https://www.example.com/page?query=hello world"

This example uses a simple URL to visually demonstrate how encoding and decoding work.

Important Note

The decodeURIComponent() function should only be used to decode properly encoded strings. Decoding strings that are malformed or do not follow encoding rules may result in unexpected behavior. In such cases, exception handling is necessary.

JavaScript 
function decodeURL(encodedURL) {
    try {
        return decodeURIComponent(encodedURL);
    } catch (error) {
        console.error(error);
        return null;
    }
}

const encodedURL = "";

const decodedURL = decodeURL(encodedURL);

if (decodedURL) {
    console.log(decodedURL);
} else {
    console.log("Invalid URL.");
}

 // Output: "Invalid URL."

In this example, the encoded URL is an empty string. Therefore, the decodeURIComponent() function throws an error.

As shown in this example, if the encoded URL is malformed or does not follow the encoding rules, the decodeURIComponent() function can throw an error. In such cases, use exception handling to properly manage the error.

Specifications

Specification for JavaScript decodeURIComponent() Function
Specification
decodeURIComponent() ECMAScript Language Specification
#sec-decodeuricomponent-encodeduricomponent

Browser compatibility

Browser compatibility for JavaScript decodeURIComponent() Function
Function
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
decodeURIComponent() 1 12 1 1.1

See also