How to Encode and Decode the URL in JavaScript

Tutorialsrack 08/06/2021 Jquery Javascript

In this article, you’ll learn how to encode and decode the URL in javascript. JavaScript provides built-in functions to encode and decode URI. Here are four methods that we will discuss in this post:

1. encodeURL() - This function is used to encode a URI.
2. encodeURIComponent() - This function encodes a URI component.
3. decodeURI()- This function is used to decode a URI.
4. decodeURIComponent() - This function decodes a URI component.

Encode URL in JavaScript

JavaScript provides two built-in methods to encode URL and single URL parameter:

1. encodeURL() - The encodeURI() function is used to encode a full URI.
2. encodeURIComponent() - The encodeURIComponent() function encodes a URI component.

Example 1: Encode URL using encodeURI() Method

In this example, we used the encodeURI() method to encode the full URL in javascript. The encodeURI() method encodes special characters, except: , / ? : @ & = + $ #

var url = "https://tutorialsrack.com/?x=tutorials rack website";

//Function to EncodeURL
function EncodeURL(url) {
    return encodeURI(url);
}
console.log("Before Encoded URL: " + url);
console.log("After Encoded URL: " + EncodeURL(url));

// ==============Output===================
// "Before Encoded URL: https://tutorialsrack.com/?x=tutorials rack website"

// "After Encoded URL: https://tutorialsrack.com/?x=tutorials%20rack%20website"

Example 2: Encode URL using encodeURIComponent() Method

In this example, we used the encodeURIComponent() method to encode a URI component. in javascript. The encodeURIComponent() method encodes special characters, In addition, it encodes the following characters also: , / ? : @ & = + $ #

var url = "https://tutorialsrack.com/?x=tutorials rack website";

//Function to EncodeURL
function EncodeURLComponent(url) {
    return encodeURIComponent(url);
}
console.log("Before Encoded URL: " + url);
console.log("After Encoded URL: " + EncodeURLComponent(url));

// ==============Output===================
// "Before Encoded URL: https://tutorialsrack.com/?x=tutorials rack website"

// "After Encoded URL: https%3A%2F%2Ftutorialsrack.com%2F%3Fx%3Dtutorials%20rack%20website"

Decode URL in JavaScript

JavaScript provides two built-in methods to decode full URL and single URL parameter:

1. decodeURI()- The decodeURI() function is used to decode a URI.
2. decodeURIComponent() - The decodeURIComponent() function decodes a URI component.

Example 1: Decode URL using decodeURI() Method

In this example, we used the decodeURI() method to decode the encoded full URL in javascript. First, encode the URL using the encodeURI() method and then decode it using the decodeURI() function.

var url = "https://tutorialsrack.com/?x=tutorials rack website";
console.log("Before Encoded URL: " + url);
//"Before Encoded URL: https://tutorialsrack.com/?x=tutorials rack website"

var encoded = encodeURI(url);
console.log("After Encoded URL: " + encoded);
// "After Encoded URL: https://tutorialsrack.com/?x=tutorials%20rack%20website"

try {
    var decoded = decodeURI(encoded);
    console.log("After Decoded URL: " + decoded);
    // =====Final Output====
    //"After Decoded URL: https://tutorialsrack.com/?x=tutorials rack website"
} catch (e) {
    // catches a malformed URI
    console.error(e);
}

Example 2: Decode URL using decodeURIComponent() Method

In this example, we used the decodeURIComponent() method to decode the encoded full URL in javascript. First, encode the URL using the encodeURIComponent() method and then decode it using the decodeURIComponent() function.

var url = 'https://tutorialsrack.com/?x=tutorials rack website';
 
console.log("Before Encoded URL: " + url);
//"Before Encoded URL: https://tutorialsrack.com/?x=tutorials%20rack%20website"
 
var encode = encodeURIComponent(url); 
console.log("After Encoded URL: " + encode);
// "After Encoded URL: https%3A%2F%2Ftutorialsrack.com%2F%3Fx%3Dtutorials%20rack%20website"
 
var decode = decodeURIComponent(encode);
console.log("After Decoded URL: " + decode);
// "After Decoded URL: https://tutorialsrack.com/?x=tutorials rack website"

I hope this article will help you to understand how to encode and decode the URL in javascript.

Share your valuable feedback, please post your comment at the bottom of this article. Thank you!

Related Posts