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

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • 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()
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • 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:

    Both can decode alphanumeric characters and – _ . ! ~ * ‘ ( ) characters even but,

  • 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 “&”

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.