Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to encode a URL using JavaScript function?
As we know, a URL is a web address. What is URL encodingand why do we need to encode a URL? The process of turning a string into an accurateURL 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. It is required to encrypt reserved characters that are not part of this set. The reliability and security of the URLs are increased with URL encoding.
Each character that needs to be URL-encoded is encoded using the character "%" and a two-character hex value corresponding to its utf-8 character.
For example,
¥€¢£¥€¢£^°√• will be encoded to C2%A5%E2%82%AC%C2%A2%C2%A3%C2%A5%E2%82%AC%C2%A2%C2%A3%5E%C2%B0%E2%88%9A%E 2%80%A2
Using the encodeURI() Method
In this section, let’s check the encoded URI() method to encode a URL in JavaScript. An encodeURI() is the general method to encode a URL. The only drawback is that this method does not encode characters ~!@#$&*()=:/,;?+ In that case, we go for another method.
Syntax
Follow the syntax below to use this method.
encodeURI(uri)
In the syntax for encodeURI(), we need to send an argument which will be the URL or string to be encoded.
Algorithm
STEP 1 − Define a function to perform encoding.
STEP 2 − Pass the URL string as a parameter to the function based on the need for encoding. That is, based on the encoding capability of the method.
STEP 3 − Display the output.
Example
In this example, we use a function to perform encodeURI(). As we learned above, we have passed the URL string according to the method’s working.
<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>
Using the encodeURIComponent() Method
In this section, let’s check the encodeURIComponent() method to encode a URL in JavaScript. encodeURI() is the general method to encode a URL.
And characters such as / ? : @ & = + $ * # and similar characters are not encoded by the encodeURI() method. As an alternative, the encodeURIComponent() function is used. But the characters such as A-Z a-z 0-9 - _.! ~ * ' () will not be encoded by the encodeURIComponent method.
Syntax
encodeURIComponent(uri)
In the syntax for encodeURIComponent(), we need to send an argument which will be the url or string to be encoded.
Example
In this example, we use a function to perform encodeURIComponent(). As we learned above, we have passed the URL string according to the working of the method.
<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>
In this tutorial, we have seen the two methods to encode a URL in JavaScript.
The encodeURI() method is the best compared to the encodeURIComponent() method. Because encodeURIComponent() encodes the entire URL along with the domain name. This gives an invalid URL. Hence we can use this method only when we need to encode the characters that will not be encoded by the encodeURI() method.
2K+ Views
