JavaScript | Кодировать / декодировать строку в Base64.

Опубликовано: 5 Января, 2022

Чтобы кодировать / декодировать строку в JavaScript, мы используем встроенные функции, предоставляемые JavaScript.

btoa ():
Этот метод кодирует строку в base-64 и использует символы «AZ», «az», «0-9», «+», «/» и «=» для кодирования предоставленной строки.

  • Синтаксис:
    window.btoa (строка)
  • Параметр:
    Строка: этот параметр является обязательным. Он определяет строку для кодирования.

atob ():
Этот метод декодирует строку в кодировке base-64, которая была закодирована методом btoa ().

  • Синтаксис:

    window.atob (строка)
  • Параметр:
    строка: этот параметр является обязательным. Он определяет строку, которая уже была закодирована методом btoa ().

Вот несколько примеров.
Пример-1: В этом примере строка «Это GeeksForGeeks» кодируется функцией btoa ().

<!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 >

Выход:

  • Перед нажатием на кнопку:
  • После нажатия на кнопку:

Пример-2: Этот пример декодирует строку «VGhpcyBpcyBHZWVrc0ZvckdlZWtz», закодированную функцией btoa (), с помощью функции atob () .

<!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 >

Выход:

  • Перед нажатием на кнопку:
  • После нажатия на кнопку:

Кроссбраузерный метод используется как библиотека javascript для кодирования / декодирования строки в любом браузере.
Пример-3: В этом примере строка «Это GeeksForGeeks» кодируется путем создания объекта Base64.

<!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(/ /g, " ");
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 >

Выход:

  • Перед нажатием на кнопку:
  • После нажатия на кнопку:

Пример-4: В этом примере строка «VGhpcyBpcyBHZWVrc0ZvckdlZWtz» кодируется путем создания объекта Base64.

<!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(/ /g, " ");
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 >

Выход:

  • Перед нажатием на кнопку:
  • После нажатия на кнопку:
JavaScript Вопросы о Web технологиях JavaScript-Misc

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Что такое тернарный оператор?
23 Января, 2024
Trovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Ember.js Свойство содержимого ArrayProxy
24 Февраля, 2023
Ошибка «Объект не определен» при попытке повернуть объект в three.js
24 Февраля, 2023
Как изменить строку в JavaScript?
23 Февраля, 2023
Как создать массив с несколькими объектами, имеющими несколько вложенных пар ключ-значение в JavaScript?
23 Февраля, 2023