JavaScript offers the “decodeURIComponent()” method that decodes the complete encoded “URI”. The URI is the “Uniform Resource Identifier” that corresponds to the URL. This method is useful while maintaining a record of confidential websites or web pages by encoding or decoding them in accordance with the requirements.

This guide illustrates the working of the “decodeURIComponent()” method in JavaScript.

What Does the “decodeURIComponent()” Method Do in JavaScript?

The “decodeURIComponent()” method converts the parts of the URI(Uniform Resource Identifier) encoded with the “encodeURIComponent()” method. It decodes all the escape characters like “/,-,.,!,~,*,’,(,)”.

Syntax

The “decodeURIComponent()” method only accepts a single argument that is encoded with the help of the “encodeURIComponent()” method.

Example: Applying the “decodeURIComponent()” Method in JavaScript

In this example, the defined “decodeURIComponent” method is applied to decode the encoded URI string when its associated event trigger.

HTML Code

Let’s look at the following HTML code:

In the above code:

• First of all, include a paragraph via the “<p>” tag.
• Next, add a button with an attached “ondblclick” event handler that redirects to the “dec()” function that will be executed on the button double-click.
• After that, an empty paragraph is added with the help of the “<p>” tag having an id “test” to show the encoded and decoded string components.

JavaScript Code

Next, proceed with the below-stated JavaScript code block:

In the above code lines:

• First, the function “dec()” is declared.
• In its definition, the URI component is initialized that requires to be decoded and encoded.
• Next, implement the “encodeURIComponent()” method is utilized to encode the initialized string.
• Now, utilize the “decodeURIComponent()” method to “decode” the URI-encoded component URI into its original format.
• The “result” variable is declared to store “encoded” and “decoded” URI component values.
• Lastly, the “getElementById()” method is applied that fetches the included empty paragraph to display the decoded and encoded URI component in it(paragraph) via the “innerHTML” property.

Output

The output shows the corresponding encoded and decoded URI components upon the button double click.

Conclusion

In JavaScript, the pre-defined “decodeURIComponent()” method is used for decoding the URI component that is encoded via the “encodeURIComponent()” method. It is such that it (the former method) works on the encoded URI string in the form of its argument and then decodes it accordingly. This write-up has covered the purpose, working, and practical implementation of the “decodeURIComponent()” method in JavaScript.