How to encode and decode URl in typescript?

The URI stands for the uniform resource identifier. The URL is one of the most common URIS. We use the URL (uniform resource locator) to find the web page located on the internet. The web pages also contain resources.

In simple terms, URI is a string containing some characters, and we can identify the physical and logical resources on the web using the URI. The URL is a subset of the URI, which stores the document address on the web.

Reasons to Encode URI

The first question that arises in your mind after reading this tutorial's title is why we need to encode and decode the URIs. The answer is simple: URL should only contain the characters from the set of 128 ASCII characters. So, we need to encode some characters which do not belong to the set of 128 ASCII characters.

So, we must escape the special characters such as ‘!’ and ‘space’ by using escape sequences, which we can do by encoding the URIS. If we don’t escape this kind of exceptional character, it may cause problems.

Encode The URI in TypeScript

There are two methods available to encode the URIs in TypeScript. The encodeURI() and encodeURIComponent(). Both methods are the built-in library method which encodes some special characters such as spaces to one, two, three, or four escape sequences. Here, the escape sequence represents the UTF-8 encoding of the character.

The main difference between the encodeURI() and encodeURIComponent() method is that encodeURI() encodes the whole URL or URI, but encodeURIComponent() encodes the part of the URL which can be query parameters of the URL.

Syntax

Users can follow the syntax below to encode URIs using the encodeURI() and encodeURIComponent() methods.

let encoded = encodeURI(URI);
let encodedComponent = encodeURIComponent(URI);

Here URI is a URI which needs to be encoded by escaping some special characters.

Example 1

In the output, we see that space is escaped by %20, ‘<’ is escaped by %3C, and ‘>’ is escaped by %3E.

// URL which contains the spaces, <, > as a special characters
const demoURL = 'https ://www.tutorialspoint.com/artic les/i ndex.php<>';

// encode the URI to escape the special characters.
const encodedURL = encodeURI(demoURL);

// Printing the encoded URL
console.log(encodedURL);

On compiling, it will generate the following JavaScript code −

// URL which contains the spaces, <, > as a special characters
var demoURL = 'https ://www.tutorialspoint.com/artic les/i ndex.php<>';

// encode the URI to escape the special characters.
var encodedURL = encodeURI(demoURL);

// Printing the encoded URL
console.log(encodedURL);

Output

The above code will produce the following output −

https%20://www.tutorialspoint.com/artic%20les/i%20ndex.php%3C%3E

Example 2

This example demonstrates the use of the encodeURIComponent() method to encode the part of the URL. We have taken the URL string containing the special characters. After that, we used the encodeURIComponent() method to encode the ‘index.php<>’ part of the URL. Also, we have encoded the "www. Tutorialspoint.com" part of the URL using the encodeURIComponent().

The output shows that rather than encoding the whole URL, it encodes a particular part of the URL.

// encoding the part of the URL using the encodeURIComponent() method
const encodedURLComponent = `https://www.tutorialspoint.com/articles/${encodeURIComponent(
   "index.php<>"
)}`;
// Printing the URL with the encoded component.
console.log(encodedURLComponent);
// Encoding the another component of the same URL
console.log(
   `https://${encodeURIComponent(
   "www. tutorialspoint.com"
   )}/articles/index.php<>`
);

On compiling, it will generate the following JavaScript code −

// encoding the part of the URL using the encodeURIComponent() method
var encodedURLComponent = "https://www.tutorialspoint.com/articles/" + encodeURIComponent("index.php<>");

// Printing the URL with the encoded component.
console.log(encodedURLComponent);

// Encoding the another component of the same URL
console.log("https://" + encodeURIComponent("www. tutorialspoint.com") + "/articles/index.php<>");

Output

The above code will produce the following output −

https://www.tutorialspoint.com/articles/index.php%3C%3E
https://www.%20tutorialspoint.com/articles/index.php<>

Decode The URI in TypeScript

Obviously, we need to decode the encoded URI. The decoder replaces the escape sequences of the character with the special character and generates the original URI from the encoded URI. We can use the decodeURI() method to decode the URI or the decodeURIComponent() method to decode the part of the URI.

Syntax

Users can follow the syntax below to decode the encoded URL or its component using the decodeURI() and decodeURIComponent() methods.

let orginalURL = decodeURI(encoded_URI);
let orginalURLComponent = decodeURI(encoded_URI);

Here encoded_URI is an encoded URI or URL which needs to be decoded.

Example 1

In this example, we first encoded the URI using the encodeURI() method and then decoded the URI using the decodeURI() method.

The output shows the same URI as the original, as we decoded after encoding the URI.

// defining the original URI
let originalURI = "https://www.google. com/";

// encoding the URI
let encodedURI = encodeURI(originalURI);
console.log("The encoded URI is " + encodedURI);

// decoding the URI
let decodedURI = decodeURI(encodedURI);
console.log("The decoded URI is " + decodedURI);

On compiling, it will generate the following JavaScript code −

// defining the original URI
var originalURI = "https://www.google. com/";

// encoding the URI
var encodedURI = encodeURI(originalURI);
console.log("The encoded URI is " + encodedURI);

// decoding the URI
var decodedURI = decodeURI(encodedURI);
console.log("The decoded URI is " + decodedURI);

Output

The above code will produce the following output −

The encoded URI is https://www.google.%20com/
The decoded URI is https://www.google. com/

Example 2

The below example demonstrates the use of the decodeURIComponent() method. We have taken the URL of the google domain and used the encodeURIComponent() method to encode some parts of the URL containing spaces and other special characters.

In the output, users can see that encoded URL. We have copied the encoded URL from the output and used the decodeURIComponent() method to decode the only encoded part rather than decoding the whole URL. After decoding the part of the encoded part, it looks similar to the original URL.

// encoding the URI component
let encodedURIComponent = `https://www.${encodeURIComponent(
   "google. com/:>"
)}=`;
console.log("The encoded URI component is " + encodedURIComponent);
// decoding the URI Component
let decodedURIComponent = `https://www.${decodeURIComponent(
   "google.%320com/:%3E"
)}=`;
console.log("The decoded URI Component is " + decodedURIComponent);

On compiling, it will generate the following JavaScript code −

// encoding the URI component
let encodedURIComponent = `https://www.${encodeURIComponent(
   "google. com/:>"
)}=`;
console.log("The encoded URI component is " + encodedURIComponent);
// decoding the URI Component
let decodedURIComponent = `https://www.${decodeURIComponent(
   "google.%320com/:%3E"
)}=`;
console.log("The decoded URI Component is " + decodedURIComponent);

Output

The above code will produce the following output −

The encoded URI component is https://www.google.%20com%2F%3A%3E=
The decoded URI Component is https://www.google.20com/:>=

There are some use cases of encoding and decoding the URIs in real-life development. For example, we want to take a string from the users using the form and make a URL using that data. Users can enter space and characters outside the set of 128 ASCII characters, and then we need to encode them.

Sometimes, we need to encode only the query parameters of the URLs. In such cases, we can use the encodeURIComponent() method. Once we encode the URI, we must decode it when we want to display the URI or URL.