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 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.
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.
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>
Tutorials Point Simply Easy Learning
Using the unescape() Method (Deprecated)
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.
Note: The unescape() function is deprecated and should not be used in modern JavaScript. Use decodeURI() or decodeURIComponent() instead.
Syntax
const decodedurl = unescape(encodedURL);
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 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>
Comparison of Methods
| Method | Use Case | Status | Recommended |
|---|---|---|---|
decodeURI() |
Complete URLs | Standard | Yes |
decodeURIComponent() |
URL components/parameters | Standard | Yes |
unescape() |
Legacy encoding | Deprecated | No |
Conclusion
Use decodeURI() for complete URLs and decodeURIComponent() for URL parameters. Avoid the deprecated unescape() method in modern applications.
1K+ Views
