JavaScript | Encode/Decode a string to Base64. - GeeksforGeeks

29 Apr, 2019
In order to encode/decode a string in JavaScript, We are using built-in functions provided by JavaScript.
btoa():This method encodes a string in base-64 and uses the “A-Z”, “a-z”, “0-9”, “+”, “/” and “=” characters to encode the provided string.
Syntax:window.btoa(String)

window.btoa(String)

Parameter:String: This parameter is required. It specifies the string to be encoded.
atob():This method decodes a base-64 encoded string, Which has been encoded by the btoa() method.
Syntax:window.atob(string)

window.atob(string)

Parameter:string: This parameter is required. It specifies the string which has already been encoded by the btoa() method.
Here are few of the examples.Example-1: This examples encodes the string “This is GeeksForGeeks” by btoa() function.
<!DOCTYPE html><html>  <head>    <title>        JavaScript |       encode/decode a string to Base64.    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks          </h1>      <p id="GFG_UP">    </p>      <button onclick="Geeks()">        Encode    </button>      <p id="GFG_DOWN"       style="color:green;">    </p>      <script>        var str = "This is GeeksForGeeks";        var up = document.getElementById("GFG_UP");        var down = document.getElementById("GFG_DOWN");        up.innerHTML = "Str = '" + str + "'";          function Geeks() {            down.innerHTML = window.btoa(str);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Example-2:This examples decodes the string “VGhpcyBpcyBHZWVrc0ZvckdlZWtz” encoded by btoa() function with the help of atob() function.
<!DOCTYPE html><html>  <head>    <title>        JavaScript | encode/decode a string to Base64.    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks          </h1>      <p id="GFG_UP">    </p>      <button onclick="Geeks()">        Decode    </button>      <p id="GFG_DOWN" style="color:green;">    </p>      <script>        var str = "VGhpcyBpcyBHZWVrc0ZvckdlZWtz";        var up = document.getElementById("GFG_UP");        var down = document.getElementById("GFG_DOWN");        up.innerHTML = "Str = '" + str + "'";          function Geeks() {            down.innerHTML = window.atob(str);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
The Cross-Browser Method is used as a javascript library to encode/decode a string in any browser.Example-3:This examples encodes the string “This is GeeksForGeeks” by creating a Base64 object.
<!DOCTYPE html><html>  <head>    <title>        JavaScript | encode/decode a string to Base64.    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks          </h1>      <p id="GFG_UP">    </p>      <button onclick="Geeks()">        Encode    </button>      <p id="GFG_DOWN" style="color:green;">    </p>      <script>        var Base64 = {            _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"+          "abcdefghijklmnopqrstuvwxyz0123456789+/=",            encode: function(e) {                var t = "";                var n, r, i, s, o, u, a;                var f = 0;                e = Base64._utf8_encode(e);                while (f < e.length) {                    n = e.charCodeAt(f++);                    r = e.charCodeAt(f++);                    i = e.charCodeAt(f++);                    s = n >> 2;                    o = (n & 3) << 4 | r >> 4;                    u = (r & 15) << 2 | i >> 6;                    a = i & 63;                    if (isNaN(r)) {                        u = a = 64                    } else if (isNaN(i)) {                        a = 64                    }                    t = t +                      this._keyStr.charAt(s) +                      this._keyStr.charAt(o) +                      this._keyStr.charAt(u) +                      this._keyStr.charAt(a)                }                return t            },            decode: function(e) {                var t = "";                var n, r, i;                var s, o, u, a;                var f = 0;                e = e.replace(/[^A-Za-z0-9\+\/\=]/g, "");                while (f < e.length) {                    s = this._keyStr.indexOf(e.charAt(f++));                    o = this._keyStr.indexOf(e.charAt(f++));                    u = this._keyStr.indexOf(e.charAt(f++));                    a = this._keyStr.indexOf(e.charAt(f++));                    n = s << 2 | o >> 4;                    r = (o & 15) << 4 | u >> 2;                    i = (u & 3) << 6 | a;                    t = t + String.fromCharCode(n);                    if (u != 64) {                        t = t + String.fromCharCode(r)                    }                    if (a != 64) {                        t = t + String.fromCharCode(i)                    }                }                t = Base64._utf8_decode(t);                return t            },            _utf8_encode: function(e) {                e = e.replace(/\r\n/g, "\n");                var t = "";                for (var n = 0; n < e.length; n++) {                    var r = e.charCodeAt(n);                    if (r < 128) {                        t += String.fromCharCode(r)                    } else if (r > 127 && r < 2048) {                        t +=                          String.fromCharCode(r >> 6 | 192);                        t +=                          String.fromCharCode(r & 63 | 128)                    } else {                        t +=                          String.fromCharCode(r >> 12 | 224);                        t +=                          String.fromCharCode(r >> 6 & 63 | 128);                        t +=                          String.fromCharCode(r & 63 | 128)                    }                }                return t            },            _utf8_decode: function(e) {                var t = "";                var n = 0;                var r = c1 = c2 = 0;                while (n < e.length) {                    r = e.charCodeAt(n);                    if (r < 128) {                        t += String.fromCharCode(r);                        n++                    } else if (r > 191 && r < 224) {                        c2 = e.charCodeAt(n + 1);                        t += String.fromCharCode(                          (r & 31) << 6 | c2 & 63);                                                n += 2                    } else {                        c2 = e.charCodeAt(n + 1);                        c3 = e.charCodeAt(n + 2);                        t += String.fromCharCode(                          (r & 15) << 12 | (c2 & 63)                          << 6 | c3 & 63);                        n += 3                    }                }                return t            }        }          var str = "This is GeeksForGeeks";        var up = document.getElementById("GFG_UP");        var down = document.getElementById("GFG_DOWN");        up.innerHTML = "Str = '" + str + "'";          function Geeks() {            down.innerHTML = Base64.encode(str);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Example-4: This examples encodes the string “VGhpcyBpcyBHZWVrc0ZvckdlZWtz” by creating a Base64 object.
<!DOCTYPE html><html>  <head>    <title>        JavaScript | encode/decode a string to Base64.    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks          </h1>      <p id="GFG_UP">    </p>      <button onclick="Geeks()">        Decode    </button>      <p id="GFG_DOWN" style="color:green;">    </p>      <script>        var Base64 = {            _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdef"+          "ghijklmnopqrstuvwxyz0123456789+/=",            encode: function(e) {                var t = "";                var n, r, i, s, o, u, a;                var f = 0;                e = Base64._utf8_encode(e);                while (f < e.length) {                    n = e.charCodeAt(f++);                    r = e.charCodeAt(f++);                    i = e.charCodeAt(f++);                    s = n >> 2;                    o = (n & 3) << 4 | r >> 4;                    u = (r & 15) << 2 | i >> 6;                    a = i & 63;                    if (isNaN(r)) {                        u = a = 64                    } else if (isNaN(i)) {                        a = 64                    }                    t = t +                      this._keyStr.charAt(s) +                       this._keyStr.charAt(o) +                      this._keyStr.charAt(u) +                      this._keyStr.charAt(a)                }                return t            },            decode: function(e) {                var t = "";                var n, r, i;                var s, o, u, a;                var f = 0;                e = e.replace(/[^A-Za-z0-9\+\/\=]/g, "");                while (f < e.length) {                    s = this._keyStr.indexOf(e.charAt(f++));                    o = this._keyStr.indexOf(e.charAt(f++));                    u = this._keyStr.indexOf(e.charAt(f++));                    a = this._keyStr.indexOf(e.charAt(f++));                    n = s << 2 | o >> 4;                    r = (o & 15) << 4 | u >> 2;                    i = (u & 3) << 6 | a;                    t = t + String.fromCharCode(n);                    if (u != 64) {                        t = t + String.fromCharCode(r)                    }                    if (a != 64) {                        t = t + String.fromCharCode(i)                    }                }                t = Base64._utf8_decode(t);                return t            },            _utf8_encode: function(e) {                e = e.replace(/\r\n/g, "\n");                var t = "";                for (var n = 0; n < e.length; n++) {                    var r = e.charCodeAt(n);                    if (r < 128) {                        t += String.fromCharCode(r)                    } else if (r > 127 && r < 2048) {                        t +=                           String.fromCharCode(r >> 6 | 192);                        t +=                           String.fromCharCode(r & 63 | 128)                    } else {                        t +=                          String.fromCharCode(r >> 12 | 224);                        t +=                           String.fromCharCode(r >> 6 & 63 | 128);                        t +=                           String.fromCharCode(r & 63 | 128)                    }                }                return t            },            _utf8_decode: function(e) {                var t = "";                var n = 0;                var r = c1 = c2 = 0;                while (n < e.length) {                    r = e.charCodeAt(n);                    if (r < 128) {                        t += String.fromCharCode(r);                        n++                    } else if (r > 191 && r < 224) {                        c2 = e.charCodeAt(n + 1);                        t +=                           String.fromCharCode(                          (r & 31) << 6 | c2 & 63);                        n += 2                    } else {                        c2 = e.charCodeAt(n + 1);                        c3 = e.charCodeAt(n + 2);                        t +=                          String.fromCharCode(                          (r & 15) << 12 |                           (c2 & 63) << 6 | c3 & 63);                        n += 3                    }                }                return t            }        }          var str = "VGhpcyBpcyBHZWVrc0ZvckdlZWtz";        var up = document.getElementById("GFG_UP");        var down = document.getElementById("GFG_DOWN");        up.innerHTML = "Str = '" + str + "'";          function Geeks() {            down.innerHTML = Base64.decode(str);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?