Difference between decodeURIComponent() and decodeURI() functions in JavaScript

Difficulty Level : Expert
Last Updated : 27 Apr, 2020

Both decodeURI() and decodeURIComponent() are Javascript global functions that are used for decoding encoded URI (Uniform Resource Identifier).

decodeURI() function: It decodes a string previously encoded by encodeURI() function. It returns a decoded URI by replacing each UTF-8 escape sequence with the characters it represents.

Syntax:
```
decodeURI(encodeURI(x));
```
Parameter It contains single parameter that includes a string previously encoded by encodeURI() function and hence result will be x again.

Example: This example using decodeURI() function.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>decodeURI() Example</title> 
</head> 
  
<body> 
    <script type="text/javascript"> 
        var decodeText1 = decodeURI('http://www.testing.com/'); 
        document.write(decodeText1); 
        document.write("<br>"); 
        var decodeText2 = decodeURI('http%3A%2F%2Fwww.testing.com%2F'); 
        document.write(decodeText2); 
    </script> 
</body> 
  
</html> 

Output:

http://www.testing.com/
http%3A%2F%2Fwww.testing.com%2F

decodeURIComponent() function: It decodes a string previously encoded by encodeURIComponent() function. It returns a decoded URI Component by replacing each UTF-8 escape sequence with the characters it represents. It can decode any value between %00 and %7F.

Syntax:

decodeURIComponent(encodeURIComponent(x));

Parameter Single parameter that includes a string previously encoded by encodeURIComponent() and hence result will be x again.

Example: This example is on decodeURIComponent()

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>decodeURIComponent() Example</title> 
</head> 
  
<body> 
    <script type="text/javascript"> 
        var decodeText1 = decodeURIComponent( 
                          'http://www.testing.com/'); 
        document.write(decodeText1); 
        document.write("<br>"); 
        var decodeText2 = decodeURIComponent( 
                  'http%3A%2F%2Fwww.testing.com%2F'); 
        document.write(decodeText2); 
    </script> 
</body> 
  
</html> 

Output:

http://www.testing.com/
http://www.testing.com/

Note:Both fuctions throw URIError indicating that one or more of the escape sequences in string is malformed and cannot be correctly decoded.

Difference between decodeURIComponent() and decodeURI() Function:

decodeURI(): It takes encodeURI(url) string so it cannot decoded characters (, / ? : @ & = + $ #)
decodeURIComponent(): It takes encodeURIComponent(url) string so it can decode these characters.

decodeURI(): It takes encodeURI(url) string as parameter and returns the decoded string.
decodeURIComponent(): It takes encodeURIComponent(url) string as parameter and returns the decoded string.

decodeURI(“%41”): It returns “A”
decodeURIComponent(“%41”) It returns “A”

decodeURI(“%26”): It returns “%26”
decodeURIComponent(“%26”): It returns “&”

My Personal Notes

Related Articles