JavaScript encodeURIComponent() and decodeURIComponent() Example

📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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 = "https://javaguides.net/my 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);

Output:

before encode :: https://javaguides.net/my test.html?name=ram&age29
after encode :: https%3A%2F%2Fjavaguides.net%2Fmy%20test.html%3Fname%3Dram%26age29
after decode :: https://javaguides.net/my 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