How to Encode and Decode Strings with Base64 in JavaScript examples

 

Hi Friends, Today we will learn How you can Encode and Decode Strings with Base64 in JavaScript.

It is very useful when we send personal information one place to another place like a password or other information. Most sites use this and protect their own privacy.

So let's start.

1. btoa() : creates a base-64 encoded ASCII string from a "string" of binary data ("btoa" should be read as "binary to ASCII").

2. atob() : decodes a base64 encoded string("atob" should be read as "ASCII to binary").

Encode and Decode Strings with Base64  

• Create input box and add attribute id 
• Add two buttons for Encode and decode.

For Encode : 

1. Fire click event for encoding.
2. Get the value of the text box.
3. Encode the text data using btoa() then use it where you want to use this.
4.  Use it where you want to use this.

For Decode : 

1. Fire click event for decoding.
2. Get the value of the text box.
3. Decode  the text data using atob()
4.  Use it where you want to use this.

<input type="text" value="" id="string">

<button id="encode">Encode</button>

<button id="decode">Decode</button>

<script>

   document.getElementById('encode').onclick = function () {

     var string =  document.getElementById('string').value;

     var encodedString = btoa(string);

     document.getElementById('string').value = encodedString;

    };

    document.getElementById('decode').onclick = function () {

      var string =  document.getElementById('string').value;

      var decodedString = atob(string);

      document.getElementById('string').value = decodedString;

    };

</script>

Output -                                  Video 

If you have any error which is related to ASCII to binary or uTF8 or when you decodes a base64 encoded string because sometimes it does not read ASCII most rear chance that time you can use this below code. it will help you.

Just use base64Decode function instead of atob() and pass the encoded string on it.

 document.getElementById('encode').onclick = function () {

     var string =  document.getElementById('string').value;

     var encodedString = btoa(string);

     document.getElementById('string').value = encodedString;

    };

  document.getElementById('decode').onclick = function () {

      var string =  document.getElementById('string').value;

      var decodedString = base64Decode(string);

      document.getElementById('string').value = decodedString;

  };

var keyString = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

 var uTF8Decode = function(input) {

    var string = "";

    var i = 0;

    var c = c1 = c2 = 0;

    while ( i < input.length ) {

        c = input.charCodeAt(i);

        if (c < 128) {

            string += String.fromCharCode(c);

            i++;

        } else if ((c > 191) && (c < 224)) {

            c2 = input.charCodeAt(i+1);

            string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));

            i += 2;

        } else {

            c2 = input.charCodeAt(i+1);

            c3 = input.charCodeAt(i+2);

            string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));

            i += 3;

        }

    }

    return string;

};

var base64Decode = function(input) {

    var output = "";

    var chr1, chr2, chr3;

    var enc1, enc2, enc3, enc4;

    var i = 0;

    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

    while (i < input.length) {

        enc1 = keyString.indexOf(input.charAt(i++));

        enc2 = keyString.indexOf(input.charAt(i++));

        enc3 = keyString.indexOf(input.charAt(i++));

        enc4 = keyString.indexOf(input.charAt(i++));

        chr1 = (enc1 << 2) | (enc2 >> 4);

        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);

        chr3 = ((enc3 & 3) << 6) | enc4;

        output = output + String.fromCharCode(chr1);

        if (enc3 != 64) {

            output = output + String.fromCharCode(chr2);

        }

        if (enc4 != 64) {

            output = output + String.fromCharCode(chr3);

        }

    }

    output = uTF8Decode(output);

return output;

};

Output -                                  Video 

Yeah! You have learned 😊

I hope you understood and like this article. if you like it so, please give feedback in the comment section.

If any mistakes I made here, so please let me know and improve me.
If you have any query, feel free to ask me  😊
Recommended post
How to Scroll horizontal  Sub Menu  with Active Class while page scroll Using JavaScript ?
How to Reset DropDownList Selection Using jQuery?
How to shift button in Clock wise in javaScript using ECMA6?
Create dynamic drop-down list option with JavaScript and jQuery
Onclick show and hide div using JQuery with examples 
How to Get All Google play store apps List using PHP Scraper? 
How to pass a variable from the command line using PHP?
How to Submit Registration and Login Form in PHP?
Introduction PHP
how to declare variables in PHP?
What things you need to install PHP?
How to get meta tags in 2 easy way in PHP