JavaScript encodeURIComponent() and decodeURIComponent() Example

1. Overview of encodeURIComponent() function

To encode full URI then check out JavaScript encodeURI() and decodeURI() Example article.
  • The encodeURIComponent() function encodes a URI component.
  • This function encodes special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #
  • Note: Use the decodeURIComponent() function to decode an encoded URI component.

2. Overview of decodeURIComponent() function

  • The decodeURIComponent() function decodes a URI component.
  • Note: Use the encodeURIComponent() function to encode a URI component.

3. encodeURIComponent() and  decodeURIComponent() function example

Let's first encode URL using encodeURIComponent() method and then decode it using decodeURIComponent() function:
var uri = " test.html?name=ram&age29";
console.log("before encode :: " + uri);
var encode = encodeURIComponent(uri); 
console.log("after encode :: " + encode);

var decode = decodeURIComponent(encode);
console.log("after decode :: " + decode);
before encode :: test.html?name=ram&age29
after encode ::
after decode :: test.html?name=ram&age29
For the best learning experience, I highly recommended that you open a console (which, in Chrome and Firefox, can be done by pressing Ctrl+Shift+I), navigate to the "console" tab, copy-and-paste each JavaScript code example from this guide, and run it by pressing the Enter/Return key.

The following image shows testing encode URI component and decode URI component code examples from the browser's console tab:

Next post, check out JavaScript encodeURI() and decodeURI() Example