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 decode a URL using JavaScript function?
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.
749 Views
