JavaScript | Encode/Decode a string to Base64
Last Updated :
28 May, 2024
To encode or decode strings in JavaScript, we can use the built-in functions provided by the language. These functions help in encoding special characters in a URL or decoding encoded strings back to their original form.
1. btoa() Method
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.
2. atob() Method
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.
JavaScript
function encodeStr() {
console.log(btoa(str));
}
const str = "This is GeeksForGeeks";
encodeStr();
OutputVGhpcyBpcyBHZWVrc0ZvckdlZWtz
Example 2: This examples decodes the string "VGhpcyBpcyBHZWVrc0ZvckdlZWtz" encoded by btoa() function with the help of atob() function.
JavaScript
function decodeStr() {
console.log(atob(str));
}
const str = "VGhpcyBpcyBHZWVrc0ZvckdlZWtz";
decodeStr();
OutputThis is GeeksForGeeks
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.
JavaScript
let Base64 = {
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZ" +
"abcdefghijklmnopqrstuvwxyz0123456789+/=",
encode: function (e) {
let t = "";
let n, r, i, s, o, u, a;
let 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) {
let t = "";
let n, r, i;
let s, o, u, a;
let 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");
let t = "";
for (let n = 0; n < e.length; n++) {
let 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) {
let t = "";
let n = 0;
let 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
}
}
function encodeStr() {
console.log(Base64.encode(str));
}
const str = "This is GeeksForGeeks";
encodeStr();
OutputVGhpcyBpcyBHZWVrc0ZvckdlZWtz
Example 4: This examples encodes the string "VGhpcyBpcyBHZWVrc0ZvckdlZWtz" by creating a Base64 object.
JavaScript
let Base64 = {
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdef" +
"ghijklmnopqrstuvwxyz0123456789+/=",
encode: function (e) {
let t = "";
let n, r, i, s, o, u, a;
let 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) {
let t = "";
let n, r, i;
let s, o, u, a;
let 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");
let t = "";
for (let n = 0; n < e.length; n++) {
let 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) {
let t = "";
let n = 0;
let 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
}
}
function decodeStr() {
console.log(Base64.decode(str));
}
const str = "VGhpcyBpcyBHZWVrc0ZvckdlZWtz";
decodeStr();
OutputThis is GeeksForGeeks
Similar Reads
Convert base64 String to ArrayBuffer In JavaScript A Base64 string represents binary data in an ASCII string format by translating it into a radix-64 representation. Often used to encode binary data in text-based formats like JSON or HTML, it needs to be converted back into its original binary format for further processing. An ArrayBuffer in JavaScr
2 min read
JavaScript - Convert Byte Array to String Here are the various methods to convert Byte Array to string in JavaScript.1. Using WebAPI TextDecoder.decode() MethodThe TextDecoder API is a modern and efficient way to convert a byte array (Uint8Array) to a string. It’s supported in both browsers and Node.js.JavaScriptconst byteA = new Uint8Array
2 min read
How to convert image into base64 string using JavaScript ? In this article, we will convert an image into a base64 string using Javascript. The below approaches show the methods to convert an image into a base64 string using Javascript.ApproachHere we will create a gfg.js file which will include JavaScript code and one gfg.html file.Now we will put onchange
2 min read
How To Convert Base64 to JSON String in JavaScript? There could be situations in web applications, where there is a need to decode the data from Base64 format back into its original JSON format. It generally happens when one has to transmit data over the network where Base64 encoding is well suited for encoding binary data.In this article, we will se
2 min read
How to Convert JSON to base64 in JavaScript ? Base 64 is the encoding scheme that represents binary data in a printable ASCII format, commonly used for data serialization and transmission. Table of Content Using btoa functionUsing Manual ConversionUsing btoa functionIn this approach, we're using btoa to encode a UTF-8 string representation of a
2 min read
How to Convert Base64 to File in JavaScript? In web development, Base64 encoding is often used to represent binary data, such as images or files, with a string of ASCII characters, sometimes you may be required to change this Base64 string back into a file for instance for file uploads, downloads, or processing in the browser, this article aim
2 min read