Base64 в JavaScript и UTF-8

В JavaScript есть две функции для декодирования и кодирования строк base64:

btoa() – кодирует строку в Base64:

var value = window.btoa('Encode a string');
console.log(value);
JS

atob() – декодирует:

var value = window.atob('RW5jb2RlIGEgc3RyaW5n');
console.log(value);
JS

Но в большинстве браузеров они не работают с кириллицей в UTF-8 и символами эмодзи.
В консоле браузера будет ошибка:

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

Исправить это можно несколькими способами:

1

Метод предложенный Johan Sundström:

Кодирование

function utf8_to_b64(str) {
	return window.btoa(unescape(encodeURIComponent(str)));
}

var value = utf8_to_b64('Текст с эмодзи 😀😃😄');
console.log(value);
JS

Декодирование

function b64_to_utf8(str) {
	return decodeURIComponent(escape(window.atob(str)));
}

var value = b64_to_utf8('0KLQtdC60YHRgiDRgSDRjdC80L7QtNC30Lgg8J+YgPCfmIPwn5iE');
console.log(value);
JS
2

Мини-библиотека base64.js (5kb), которая предварительно конвертирует строку в UTF-8.

Кодирование

var value = Base64.encode('Текст с эмодзи 😀😃😄');
console.log(value);
JS

Декодирование

var value = Base64.decode('0KLQtdC60YHRgiDRgSDRjdC80L7QtNC30Lgg8J+YgPCfmIPwn5iE');
console.log(value);
JS

Если кодировка HTML страницы в UTF-8, то метод Base64.decode вернет кракозябры т.к. происходит двойная перекодировка.

25.09.2018, обновлено 27.08.2019
41137
Следующая запись MD5 в JS

Комментарии

, чтобы добавить комментарий.

Другие публикации

JS-функции для вывода в консоль браузера
Функции Javascript для вывода и отладки информации в консоли браузера.
7145
0
Примеры отправки AJAX JQuery
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
272933
+36
Список MIME типов
Ниже приведён список MIME-заголовков и расширений файлов.
24872
+7
Поиск похожих текстов в базе данных MySQL + PHP
Один из вариантов поиска похожих статей в базе данных основан на схождении слов в двух текстах.
7200
+6
Как дописать стили в атрибут style тегов HTML через PHP
Данный вопрос возникает при верстке писем т.к. стили прописанные в head в почтовых сервисах и программах не работают, а...
18754
+3
Шаблонизатор Smarty
Smarty это компилирующий обработчик шаблонов для PHP позволяющий отделить логику и HTML-верстку веб-приложения.
26796
+5