JavaScript

What is the Difference Between decodeURIComponent() and decodeURI() methods in JavaScript?

JavaScript “decodeURIComponent()” and the “decodeURI()” methods work on the URI(Uniform Resource Identifier). The “decodeURIComponent()” method decodes its components whereas the “decodeURI()” decodes it completely. Hence, their definitions clearly identify the difference between both of them but they are also different from each other on the basis of some other factors.

This guide enlists the difference between decodeURIComponent() and decodeURI() methods.

First, look at the basics of the decodeURIComponent() and the decodeURI methods

before moving on to their differences.

What is the Difference Between “decodeURIComponent()” and “decodeURI()” Methods in JavaScript?

This section comprises the significant differences between the “decodeURIComponent()” and “decodeURI()” methods:

Terms decodeURIComponent() decodeURI()
Usage The “decodeURIComponent()” is used to decode the components of the URI encoded by the “encodeURIComponent()” method. The “decodeURI()” is utilized to decode the full URI encoded with the help of the “encodeURI” method.
Parameters The “decodeURIComponent()” requires an “encoded” URI by the “encodeURIComponent()” method as the mandatory parameter for decoding. The “decodeURI()” needs an “encoded” URI through the “encodeURI()” method as its essential parameter to perform a decoding operation.
Limitation The “decodeURIComponent()” only decodes the part of the URI that lies between the “; / ? : @ & = + $ , #” separators. It treats these characters as text, not special characters. The “decodeURIComponent()” decodes the complete URI.

Now, see the stated differences practically.

Difference 1: Applying “decodeURIComponent()” and “decodeURI()” Methods Based on “Usage”

According to the first difference, the “decodeURIComponent()” method decodes the encoded string via the “encodeURIComponent()” method and the “decodeURI()” decodes the encoded string through the “encodedURI()” method.

JavaScript Code

<script>

var uri = "%3B%2C%41%3F%3A%41%26%3D"

var encoded_URI= encodeURIComponent(uri);

console.log("Output(decodeURIComponent()):" + decodeURIComponent(uri))

var encoded_uri= encodeURI(uri);

console.log("Decoded URI:" + decodeURI(encoded_uri));

</script>

In the above code snippet:

  • The “uri” variable initializes a URI(Uniform Resource Identifier).
  • The “encoded_URI” variable applies the “encodeURIComponent()” method to encode the passed “uri” as its parameter.
  • Next, the “console.log()” method uses the “decodeURIComponent()” method to decode the recently encoded string and then display it in the console.
  • After that, the “decodeURI()” method decodes the encoded URI through the “encodeURI()” method specified in the “encoded_uri” variable.

Output

It is seen that the console shows the decoded URIs using the “decodeURIComponent()” and “decodeURI()” methods

Difference 2: Applying “decodeURIComponent()” and “decodeURI()” Methods Based on “Parameters”

It can be clearly seen in “Difference 1” that the “decodeURIComponent()” accepts the encoded URI via the “encodeURIComponent()” method and the “decodeURI()” works on the encoded URI via the “encodeURI()” method as a parameter.

Difference 3: Applying “decodeURIComponent()” and “decodeURI()” Methods Based on “Decoded Characters”

The third difference between the “decodeURIComponent()” and “decodeURI()” methods can be analyzed by decoding the specific URI. Let’s see it practically.

JavaScript Code

<script>

var uri = "@%20&%7F=%3A%41%26%3D"

console.log("Output(decodeURIComponent()): " + decodeURIComponent(uri))

console.log("Output(decodeURI()): " + decodeURI(uri))

</script>

In the given script section:

  • The first “console.log()” method displays decoded URI using the “decodeURIComponent()” method.
  • The second “console.log()” method shows the decoded URI with the help of the “decodeURI()” method.

Output

The console clearly shows that the “decodeURIComponent()” method only decodes the URI component lying between “@ & =” characters, not the complete URI.

Conclusion

JavaScript “decodeURIComponent()” and the “decodeURI()” methods differ from each other depending on the “usage”, “parameters”, and the “limitation” factors. The main/significant difference between each other is that the “decodeURIComponent()” decodes the URI component whereas the “decodeURI()” method decodes the complete URI. This guide practically explained the key differences between decodeURIComponent() and decodeURI() methods.

About the author

Areej Nadeem

I am a technical author holding a Bachelor’s degree in Computer Science. I am passionate about writing and learning new technologies and sharing my knowledge with the rest of the world.