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
JavaScript encodeURI(), decodeURI() and its components functions
JavaScript provides four essential functions for handling URI encoding and decoding. The encodeURI() function encodes complete URIs while preserving structural characters, whereas encodeURIComponent() encodes URI components including all special characters.
Understanding the Functions
The encodeURI() function encodes special characters in a URI except for reserved characters like , / ? : @ & = + $ # which are essential for URI structure. The encodeURIComponent() function encodes URI components by encoding all special characters including the reserved ones.
The corresponding decode functions decodeURI() and decodeURIComponent() reverse the encoding process.
Syntax
encodeURI(uri) decodeURI(encodedURI) encodeURIComponent(uriComponent) decodeURIComponent(encodedURIComponent)
Example: Complete URI Encoding vs Component Encoding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URI Encoding Example</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
background-color: #f5f5f5;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
button {
padding: 10px 15px;
margin: 5px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>URI Encoding and Decoding Functions</h1>
<button onclick="demonstrateEncodeURI()">Encode URI</button>
<button onclick="demonstrateDecodeURI()">Decode URI</button>
<button onclick="demonstrateEncodeURIComponent()">Encode URI Component</button>
<button onclick="demonstrateDecodeURIComponent()">Decode URI Component</button>
<div id="output"></div>
<script>
const originalURL = "https://www.example.com/search?q=hello world&category=tech";
const outputDiv = document.getElementById('output');
let encodedURL = '';
let encodedComponent = '';
function demonstrateEncodeURI() {
encodedURL = encodeURI(originalURL);
outputDiv.innerHTML = `
<div class="result">
<h3>encodeURI() Result:</h3>
<p><strong>Original:</strong> ${originalURL}</p>
<p><strong>Encoded:</strong> ${encodedURL}</p>
</div>
`;
}
function demonstrateDecodeURI() {
if (!encodedURL) {
outputDiv.innerHTML = '<div class="result">Please encode URI first!</div>';
return;
}
const decodedURL = decodeURI(encodedURL);
outputDiv.innerHTML = `
<div class="result">
<h3>decodeURI() Result:</h3>
<p><strong>Encoded:</strong> ${encodedURL}</p>
<p><strong>Decoded:</strong> ${decodedURL}</p>
</div>
`;
}
function demonstrateEncodeURIComponent() {
encodedComponent = encodeURIComponent(originalURL);
outputDiv.innerHTML = `
<div class="result">
<h3>encodeURIComponent() Result:</h3>
<p><strong>Original:</strong> ${originalURL}</p>
<p><strong>Encoded:</strong> ${encodedComponent}</p>
</div>
`;
}
function demonstrateDecodeURIComponent() {
if (!encodedComponent) {
outputDiv.innerHTML = '<div class="result">Please encode URI component first!</div>';
return;
}
const decodedComponent = decodeURIComponent(encodedComponent);
outputDiv.innerHTML = `
<div class="result">
<h3>decodeURIComponent() Result:</h3>
<p><strong>Encoded:</strong> ${encodedComponent}</p>
<p><strong>Decoded:</strong> ${decodedComponent}</p>
</div>
`;
}
</script>
</body>
</html>
Comparison of Encoding Functions
| Function | Purpose | Encodes Reserved Characters | Use Case |
|---|---|---|---|
encodeURI() |
Encode complete URI | No | Full URL encoding |
encodeURIComponent() |
Encode URI parts | Yes | Query parameters, path segments |
Key Differences
encodeURI() is designed for complete URLs and preserves characters that have special meaning in URIs. encodeURIComponent() encodes everything including reserved characters, making it perfect for individual URI components like query parameter values.
Conclusion
Use encodeURI() for complete URLs and encodeURIComponent() for individual URI parts like query parameters. Always use the corresponding decode functions to retrieve original values.
366 Views
