Skip to content
Related Articles

Related Articles

Improve Article

JavaScript | Encode/Decode a string to Base64.

  • Last Updated : 29 Apr, 2019
Geek Week

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)
    
  • 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)
    
  • 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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :