How to encode a URL using JavaScript function?

Front End TechnologyJavascriptWeb Development

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.

raja
Updated on 23-Aug-2022 09:12:46

Advertisements