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 a URL using JavaScript function?
As we know, a URL is a web address. What is URL encoding and why do we need to encode a URL? The process of turning a string into an accurate URL format is known as URL encoding.
A valid URL format only uses "alpha | digit | safe | extra | escape" characters. Only a limited selection of the normal 128 ASCII characters is permitted in URLs. Reserved characters that are not part of this set must be encoded. URL encoding increases the reliability and security of URLs.
Each character that needs to be URL-encoded is encoded using the character "%" followed by a two-character hex value corresponding to its UTF-8 character.
For example:
Original: ¥?¢£^°?? Encoded: %C2%A5%E2%82%AC%C2%A2%C2%A3%5E%C2%B0%E2%88%9A%E2%80%A2
Using the encodeURI() Method
The encodeURI() method is the general approach to encode a complete URL. However, it does not encode characters like ~!@#$&*()=:/,;?+. For these characters, we need encodeURIComponent().
Syntax
encodeURI(uri)
Example
In this example, we encode a URL that contains spaces and special characters:
<html>
<body>
<h2>Using the <i>encodeURI()</i> method</h2>
<p id="idEnOutput"></p>
<script>
function doEncode(str) {
var encode, dispEl, disStr = "encodeURI";
dispEl = document.getElementById("idEnOutput");
encode = encodeURI(str);
dispEl.innerHTML = disStr + "<br>" + encode;
}
doEncode("https://www.tutorialspoint.com/check doc?qp=abc and xyz&count=1");
</script>
</body>
</html>
encodeURI https://www.tutorialspoint.com/check%20doc?qp=abc%20and%20xyz&count=1
Using the encodeURIComponent() Method
The encodeURIComponent() method encodes more characters than encodeURI(). It encodes characters such as / ? : @ & = + $ * # but does not encode A-Z a-z 0-9 - _.!~*'().
Syntax
encodeURIComponent(uri)
Example
In this example, we encode a query string that contains special characters:
<html>
<body>
<h2>Using the <i>encodeURIComponent()</i> method</h2>
<p id="idEnOutput"></p>
<script>
function doEncode(str) {
var encode, dispEl, disStr = "encodeURIComponent";
dispEl = document.getElementById("idEnOutput");
encode = encodeURIComponent(str);
dispEl.innerHTML = disStr + "<br>" + encode;
}
doEncode("qstr?qtxt=me@gmail.com");
</script>
</body>
</html>
encodeURIComponent qstr%3Fqtxt%3Dme%40gmail.com
Comparison
| Method | Use Case | Encodes Special Characters |
|---|---|---|
encodeURI() |
Complete URLs | Spaces, non-ASCII, but not URL delimiters |
encodeURIComponent() |
URL parameters/query strings | All special characters including URL delimiters |
Key Points
- Use
encodeURI()for complete URLs to preserve URL structure - Use
encodeURIComponent()for individual URL parameters that contain special characters - Never use
encodeURIComponent()on a complete URL as it will encode slashes and colons, making it invalid
Conclusion
Choose encodeURI() for complete URLs and encodeURIComponent() for URL parameters. Understanding the difference ensures proper URL encoding without breaking URL structure.
2K+ Views
