How to encode a string in JavaScript?

Javascript Web Development Front End Technology

In this article we are going to learn how to encode a string in JavaScript with appropriate examples.

Encoding is the process of converting from one data format to another format. In computer science terms, encoding is the process of converting a text into a cipher text. Encoding is different from the Encryption process.

The difference between encoding and encryption is where the encoding is used to keep data usable and data confidentiality is maintained by encryption. Encoding does not use a key for encoding process whereas for encryption there should be a key for encryption process. The methods that are used to encode a string in JavaScript are btoa(), encodeURI(), encodeURIComponent().

Using btoa() method

A string in base-64 is encoded into Base64-encoded ASCII string using the btoa() function. The syntax for btoa() method is −

btoa(string);

Where, the parameter string is the string to be encoded. The return value is an encoded string.

Example 1

This is an example program to encode a string using btoa() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title> Encoding a string in JavaScript.</title>
</head>
<body>
   <p id="encode"></p>
   <script>
      var str = "Tutorials point";
      document.getElementById('encode').innerHTML = 'The encoded string for "Tutorials point" is '+window.btoa(str);
   </script>
</body>
</html>

The output for the above example program is −

Using the encodeURI() method

The encodeURI() function encodes a URI or a string by replacing each instance of certain characters like white spaces by escape sequences representing the UTF-8 encoding of the character. The syntax for encodeURI() method is

encodeURI(uri);

Where, the parameter uri is a complete URI or a string. The return value is an encoded string.

Example 2

This is an example program to encode a string using encodeURI() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title> Encoding a string in JavaScript.</title>
</head>
<body>
   <p id="encode"></p>
   <script>
      var str1 = "Tutorials point";
      var uri = "https://twitter.com/Google?ref_src=twsrc%5Egoogle";
      document.getElementById('encode').innerHTML = 'The encoded string for "Tutorials point" is '+encodeURI(str1)+'<br/>'+'The encoded string for "https://twitter.com/Google?ref_src=twsrc%5Egoogle" is '+encodeURI(uri);
   </script>
</body>
</html>

The output for the above example program is −

Using the encodeURIComponent() method

The encodeURIComponent() method is an advanced version for encodeURI() method. The difference between encodeURI() and encodeURIComponent() method is where the encoding a whole URL is done using encodeURI(), but encoding a URI component, such a query string, is done using encodeURIComponent(). encodeURIComponent() can encode characters (‘#’,’&’,’$’,’/’,’:’,’;’,’@’,’?’) which cannot be encoded by encodeURI() method. The syntax for encodeURIComponent() method is

encodeURIComponent(value);

Where, value is any value which is Boolean, string, and the number is converted to string before encoding. The return value is an encoded string.

Example 3

This is an example program to encode a string using encodeURIComponent() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title> Encoding a string in JavaScript.</title>
</head>
<body>
   <p id="encode"></p>
   <script>
      var str1 = "Tutorials point";
      var uriComp = "https://twitter.com/Google?ref_src=twsrc%5Egoogle";
      document.getElementById('encode').innerHTML = 'The encoded string for "Tutorials point" is '+encodeURIComponent(str1)+'<br/>'+'The encoded string for "https://twitter.com/Google?ref_src=twsrc%5Egoogle" is '+encodeURIComponent(uriComp);
   </script>
</body>
</html>

The output for the above example program is −