Home » JavaScript

encodeURIComponent() and decodeURIComponent() functions with examples in JavaScript

JavaScript encodeURIComponent() and decodeURIComponent() functions: Here, we are going to learn about encodeURIComponent() and decodeURIComponent() functions with examples, how and when they are used?
Submitted by IncludeHelp, on February 01, 2019

As we have discussed that escape(), unescape() and encodeURI(), decodeURI() are used to encode a decodes the data/URI, these functions do not encode some of the special characters like @+-/.*_.

But, the functions encodeURIComponent() and decodeURIComponent() can do it.

Functions encodeURIComponent() and decodeURIComponent() are used to encode and decode the URI along with @+-/.*_ characters. These functions encode, decode all special characters.

Example:

<html>
<head>
<title>JavaScipt Example</title>
</head>

<body>
	<script>
		var uri ="test page.aspx?val=Hello world!!";
		
		//using encodeURI() and decodeURI() functions
		var enc_str = encodeURI(uri);
		var dec_str = decodeURI(uri);
		
		//printing the values 
		document.write("<b>Using encodeURI() and decodeURI()...</b><br>");
		document.write("Actual URI: " + uri);
		document.write("<br>");
		
		document.write("Encoded URI: " + enc_str);
		document.write("<br>");
		
		document.write("Decoded URI: " + dec_str);
		document.write("<br><br>");				

		//using encodeURIComponent() and decodeURIComponent() functions
		var enc_str = encodeURIComponent(uri);
		var dec_str = decodeURIComponent(uri);
		
		//printing the values 
		document.write("<b>Using encodeURIComponent() and decodeURIComponent()...</b><br>");
		document.write("Actual URI: " + uri);
		document.write("<br>");
		
		document.write("Encoded URI: " + enc_str);
		document.write("<br>");
		
		document.write("Decoded URI: " + dec_str);
		document.write("<br>");						
	</script>
</body>
</html>

Output

Using encodeURI() and decodeURI()...
Actual URI: test page.aspx?val=Hello world!!
Encoded URI: test%20page.aspx?val=Hello%20world!!
Decoded URI: test page.aspx?val=Hello world!!

Using encodeURIComponent() and decodeURIComponent()...
Actual URI: test page.aspx?val=Hello world!!
Encoded URI: test%20page.aspx%3Fval%3DHello%20world!!
Decoded URI: test page.aspx?val=Hello world!!





Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.
Learn PCB Designing: PCB DESIGNING TUTORIAL







Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing » Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.