How to decode a URL using JavaScript function?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to decode a URL using JavaScript.

URL is an abbreviation for Uniform Resource Locator. A URL is the address of a certain Web site. Each valid URL, in principle, links to a different resource. These resources include an HTML page, a CSS document, a picture, etc.

There are several exceptions in practice, the most frequent being a URL linking to a resource that no longer exists or has migrated. Because the Web server handles both the resource represented by the URL and the URL itself, it is up to the web server's owner to properly manage that resource and its associated URL.

URL encoding refers to replacing certain characters in a URL with one or more character triplets composed of the percent character "%" followed by two hexadecimal numbers. The triplet's two hexadecimal digits represent the numeric value of the replacement character. URL encoding’s reverse process is URL decoding.

With the query parameters, while making a GET request to API, encoding and decoding URL and URL components is a common activity in web development. Often, a URL string containing query parameters is constructed, and the response server must decode this URL to comprehend it. Browsers automatically encode URLs, converting some special characters to other reserved characters before making the request.

Following are the techniques to decode a URL using a JavaScript function.

Using the decodeURI() Method

The decodeURI() method decodes the URI created by encodeURI(). This function takes one parameter, which contains the encoded string. The decoded string is returned by this function (original string).

When the encoded URL contains improper character sequences, a URIError ("malformed URI sequence") exception is thrown. With the character it represents, replaces each escape sequence in the encoded URI but does not decode escape sequences that encodeURI could not have introduced. Escape sequences do not decode the character #.

Syntax

const decodedURL = decodeURI(url);

The function decodeURI() accepts the input of a URL and decodes it. The value is stored in the variable decodedURL.

Example

In this example, we have taken the input of an encoded URL. The URL is decoded using the decodeURI() function, and the decoded URL is printed on the user's screen.


<html>
<body>
   <h2> Decode a URL using <i> decodeURI() </i> function </h2>
   <p> Below is the decoded URL: </p>
   <p id = "root"> </p>
   <script>
      let root = document.getElementById("root");
      const url =
      `https://www.google.com/search?q=facebook&rlz=1C1RLNS_enIN812IN812&oq=fac
      ebook&aqs=chrome..69i57j46i131i199i433i465i512j0i131i433i512l4j0i512j0i13
      1i433i512j0i131i433j0i271.4255j0j15&sourceid=chrome&ie=UTF-8`;
      const decodedURL = decodeURI(url);
      root.innerHTML = decodedURL;
   </script>
</body>
</html>

Using the decodeURIComponent() Method

The decodeURIComponent() method decodes a URI component previously produced by encodeURIComponent or a similar procedure. The decoded version of the specified encoded Uniform Resource Identifier (URI) component is returned as a new string. This method takes a single parameter that contains the encoded string.

This method returns the URL string's decoded component. When used incorrectly, it raises a URIError ("malformed URI sequence") error. Each escape sequence in the encoded URL component is replaced with the character it represents.

Syntax

const decodedComponent = decodeURIComponent(component);

The function decodeURIComponent() receives the URL component input and decodes it. The value is saved in the variable decodedComponent.

Example

In this example, a component of an encoded URL is taken as input in the component variable. The % signs are a symbol that the component is encoded. The decodeURIComponent() function decodes the URL component, which removes the percent signs and shows the string between them. The decoded component is printed on the user's screen.


<html>
<body>
   <h2> Decode a URL using <i> decodeURIComponent() </i> Method </h2>
   <p> Below is the decoded URL: </p>
   <p id = "root"> </p>
   <script>
      let root = document.getElementById("root");
      const component = "Tutorials%20Point%20Simply%20Easy%20Learning"
      const decodedComponent = decodeURIComponent(component);
      root.innerHTML = decodedComponent;
   </script>
</body>
</html>

Using the unescape() Method

The unescape() method creates a new string by replacing hexadecimal escape sequences with the character it represents. A function like escape might be used to introduce the escape sequences. A new string with some characters left unescaped.

The unescape function is a global object attribute. This method solely decodes special characters; it is deprecated. @ - +. / * _ are exception characters.

Syntax

const decodedurl = unescape(encodedURL);

The unescape() function accepts the input of an encoded URL and decodes its characters. The value is stored in the "decodedurl" variable.

Example

In this example, a URL is given as input. This URL is encoded using the encodeURI() function and stored in the encodedURL variable. The escape() function takes a single string as a parameter and encodes it so it can be transmitted over a computer network that supports ASCII characters. The URL is then decoded using the unescape() function of JavaScript. This decoded URL is printed on the user's screen.


<html>
<body>
   <h2> Decode a URL using <i> unescape() </i> Method </h2>
   <p> Below is the decoded URL: </p>
   <p id = "root"> </p>
   <script>
      let root = document.getElementById("root");
      const url = "https://www.twitter.com";
      const encodedURL = encodeURI(url);
      const escapeurl = escape(url);
      const decodedurl = unescape(encodedURL);
      root.innerHTML = decodedurl;
   </script>
</body>
</html>

In this tutorial, we have learned how to decode a uniform resource locator using a JavaScript function. Three JavaScript functions are explained in this tutorial, namely, the decodeURI() function, the decodeURIComponent() function, and the unescape() function. These functions are used to decode a URL in JavaScript.