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
How to encode and decode a URL in JavaScript?
Encoding and decoding URLs is essential in web development for handling special characters in URLs. When making GET requests to APIs with query parameters, proper encoding ensures URLs are transmitted correctly. Browsers often handle this automatically, but understanding these methods is crucial.
For example, a space " " is encoded as %20 or + depending on the context.
Understanding URL Encoding Methods
JavaScript provides two main functions for URL encoding:
encodeURI() ? Encodes a complete URI while preserving URL structure characters like :, /, ?, #, &, =
encodeURIComponent() ? Encodes all special characters including URL structure characters. Use this for query parameters and individual URL components.
Syntax
encodeURI(uri) encodeURIComponent(uriComponent)
Parameters
uri ? The complete URI string to be encoded
uriComponent ? A URI component (like query parameter) to be encoded
Encoding Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>URL Encoding</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script>
const url = "https://www.tutorialspoint.com/search?q=java articles";
document.write('<h4>Original URL: </h4>' + url + '<br>');
const encodedURI = encodeURI(url);
document.write('<h4>encodeURI(): </h4>' + encodedURI + '<br>');
const encodedComponent = encodeURIComponent(url);
document.write('<h4>encodeURIComponent(): </h4>' + encodedComponent + '<br>');
// Encoding just the query parameter
const searchTerm = "java articles";
const encodedParam = encodeURIComponent(searchTerm);
document.write('<h4>Encoded parameter: </h4>' + encodedParam);
</script>
</body>
</html>
URL Decoding Methods
JavaScript provides corresponding decoding functions:
decodeURI() ? Decodes a URI encoded with encodeURI()
decodeURIComponent() ? Decodes a URI component encoded with encodeURIComponent()
Syntax
decodeURI(encodedURI) decodeURIComponent(encodedURIComponent)
Decoding Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>URL Decoding</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script>
const originalURL = "https://www.tutorialspoint.com/search?q=java articles";
// Encode
const encodedURI = encodeURI(originalURL);
const encodedComponent = encodeURIComponent(originalURL);
document.write('<h4>Encoded URI: </h4>' + encodedURI + '<br>');
document.write('<h4>Encoded Component: </h4>' + encodedComponent + '<br>');
// Decode
const decodedURI = decodeURI(encodedURI);
const decodedComponent = decodeURIComponent(encodedComponent);
document.write('<h4>Decoded URI: </h4>' + decodedURI + '<br>');
document.write('<h4>Decoded Component: </h4>' + decodedComponent);
</script>
</body>
</html>
Key Differences
| Function | Use Case | Encodes URL Structure |
|---|---|---|
| encodeURI() | Complete URLs | No (preserves :, /, ?, #) |
| encodeURIComponent() | Query parameters, URL parts | Yes (encodes all special chars) |
Common Use Cases
Use encodeURIComponent() when building URLs with dynamic parameters:
<!DOCTYPE html>
<html>
<body>
<script>
// Building a search URL
const baseURL = "https://api.example.com/search";
const searchQuery = "JavaScript & Node.js";
const fullURL = baseURL + "?q=" + encodeURIComponent(searchQuery);
document.write("API URL: " + fullURL);
</script>
</body>
</html>
Conclusion
Use encodeURIComponent() for query parameters and URL parts, and encodeURI() for complete URLs. Always encode user input to prevent URL malformation and security issues.
6K+ Views
