Encode and Decode URL in JavaScript

Author:
In this post, we will learn how to encode and decode URL in JavaScript. JavaScript provides a built-in encode and decode URI methods. Here are four methods that we will discuss in this post:
  1. encodeURL() - The encodeURI() function is used to encode a URI.
  2. encodeURIComponent() - The encodeURIComponent() function encodes a URI component.
  3. decodeURI()- The decodeURI() function is used to decode a URI.
  4. decodeURIComponent() - The decodeURIComponent() function decodes a URI component.

1. Encode URL in JavaScript

JavaScript provides two standard built-in methods to encode full 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.
These 2 methods differ in which characters they do encode.
  • encodeURL() function encodes special characters, except: , / ? : @ & = + $ #
  • encodeURIComponent() function encodes special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #
Why do they differ? Because they are meant for different uses:
  • encodeURI() is meant to encode a full URL
  • encodeURIComponent() is meant to encode a single URL parameter value

1.1 Encode URL using encodeURI() function example

var uri = 'https://javaguides.net/?x=шеллы';
var encoded = encodeURI(uri);
console.log(encoded);
try {
  console.log(decodeURI(encoded));
} catch(e) { // catches a malformed URI
  console.error(e);
}
Output:
https://javaguides.net/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B
https://javaguides.net/?x=шеллы

1.2 Encode URL Component using encodeURIComponent() function

var uri = "https://javaguides.net/my test.html?name=ram&age29";
console.log("before encode :: " + uri);
var encode = encodeURIComponent(uri); 
console.log("after encode :: " + encode);

var decode = decodeURIComponent(encode);
console.log("after decode :: " + decode);
Output:
before encode :: https://javaguides.net/my test.html?name=ram&age29
after encode :: https%3A%2F%2Fjavaguides.net%2Fmy%20test.html%3Fname%3Dram%26age29
after decode :: https://javaguides.net/my test.html?name=ram&age29

2. Decode URL in JavaScript

Similar to encoding, JavaScript provides two standard 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.

2.1 Decode URL using decodeURI() function example

Let's first encode using encodeURI() method and then decode it using decodeURI() function.
var uri = 'https://javaguides.net/?x=шеллы';
console.log("before encode :: " + uri);
var encoded = encodeURI(uri);
console.log("after encode :: " + encoded);
try {
    var decoded = decodeURI(encoded);
    console.log();
    console.log("after decode :: " + decoded);
} catch(e) { // catches a malformed URI
    console.error(e);
}
Output:
before encode :: https://javaguides.net/?x=шеллы
after encode :: https://javaguides.net/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B
after decode :: https://javaguides.net/?x=шеллы

2.2 Decode URL Component using encodeURIComponent() function

Let's first encode using encodeURIComponent() method and then decode it using decodeURIComponent() function.
var uri = "https://javaguides.net/my test.html?name=ram&age29";
console.log("before encode :: " + uri);
var encode = encodeURIComponent(uri); 
console.log("after encode :: " + encode);

var decode = decodeURIComponent(encode);
console.log("after decode :: " + decode);
Output:
before encode :: https://javaguides.net/my test.html?name=ram&age29
after encode :: https%3A%2F%2Fjavaguides.net%2Fmy%20test.html%3Fname%3Dram%26age29
after decode :: https://javaguides.net/my test.html?name=ram&age29
For the best learning experience, I highly recommended that you open a console (which, in Chrome and Firefox, can be done by pressing Ctrl+Shift+I), navigate to the "console" tab, copy-and-paste each JavaScript code example from this guide, and run it by pressing the Enter/Return key.

The following image shows testing encode and decode code examples from the browser's console tab:

The following image shows testing encodeURIComponent and decodeURIComponent code examples from the browser's console tab:


Comments

Post a comment