Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the difference between decodeURIComponent and decodeURI?
JavaScript provides two methods for decoding URL-encoded strings: decodeURIComponent() and decodeURI(). Understanding their differences is crucial for proper URL handling in web applications.
decodeURIComponent
The decodeURIComponent() method decodes all encoded characters in a URI component, including reserved characters like =, &, and ?.
Syntax
decodeURIComponent(encodedURIComponent)
Example
<!DOCTYPE html>
<html>
<body>
<button onclick="displayComponent()">Test decodeURIComponent</button>
<p id="demo1"></p>
<script>
function displayComponent() {
var uri = "http://example.com/welcome msg.jsp?name=åmit&sub=programming";
// first encode
var encode = encodeURIComponent(uri);
var decode = decodeURIComponent(encode);
var result = "Original: " + uri + "<br>" +
"Encoded: " + encode + "<br>" +
"Decoded: " + decode;
document.getElementById("demo1").innerHTML = result;
}
</script>
</body>
</html>
decodeURI
The decodeURI() method decodes a complete URI but preserves reserved characters that have special meaning in URLs (like ?, &, =).
Syntax
decodeURI(encodedURI)
Example
<!DOCTYPE html>
<html>
<body>
<button onclick="displayURI()">Test decodeURI</button>
<p id="demo2"></p>
<script>
function displayURI() {
var uri = "http://example.com/welcome msg.jsp?name=åmit&sub=programming";
// first encode
var encode = encodeURI(uri);
var decode = decodeURI(encode);
var result = "Original: " + uri + "<br>" +
"Encoded: " + encode + "<br>" +
"Decoded: " + decode;
document.getElementById("demo2").innerHTML = result;
}
</script>
</body>
</html>
Key Differences
| Method | Purpose | Decodes Reserved Characters | Use Case |
|---|---|---|---|
decodeURIComponent() |
Decode URI components | Yes (all characters) | Query parameters, form data |
decodeURI() |
Decode complete URIs | No (preserves ? & = etc.) | Complete URLs |
Practical Example Comparison
<!DOCTYPE html>
<html>
<body>
<button onclick="compareDecoding()">Compare Both Methods</button>
<p id="demo3"></p>
<script>
function compareDecoding() {
var encoded = "Hello%20World%3Fname%3DJohn%26age%3D30";
var decodedURI = decodeURI(encoded);
var decodedComponent = decodeURIComponent(encoded);
var result = "Encoded: " + encoded + "<br>" +
"decodeURI(): " + decodedURI + "<br>" +
"decodeURIComponent(): " + decodedComponent;
document.getElementById("demo3").innerHTML = result;
}
</script>
</body>
</html>
When to Use Which
Use decodeURI() when working with complete URLs where you want to preserve the URL structure. Use decodeURIComponent() when processing individual parts like query parameters or form data where all characters need to be decoded.
Conclusion
decodeURI() preserves URL structure by not decoding reserved characters, while decodeURIComponent() decodes everything. Choose based on whether you're handling complete URLs or individual components.
503 Views
