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

Метод 1

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

Кодирование

ZnVuY3Rpb24gdXRmOF90b19iNjQoc3RyKSB7DQoJcmV0dXJuIHdpbmRvdy5idG9hKHVuZXNjYXBlKGVuY29kZVVSSUNvbXBvbmVudChzdHIpKSk7DQp9DQoNCnZhciB2YWx1ZSA9IHV0ZjhfdG9fYjY0KCfQotC10LrRgdGCINGBINGN0LzQvtC00LfQuCDwn5iA8J+Yg/CfmIQnKTsNCmNvbnNvbGUubG9nKHZhbHVlKTs=
JS

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

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

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

Метод 2

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

Кодирование

dmFyIHZhbHVlID0gQmFzZTY0LmVuY29kZSgn0KLQtdC60YHRgiDRgSDRjdC80L7QtNC30Lgg8J+YgPCfmIPwn5iEJyk7DQpjb25zb2xlLmxvZyh2YWx1ZSk7
JS

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

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

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

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

Поделится

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

Smarty это компилирующий обработчик шаблонов для PHP позволяющий отделить логику и HTML-верстку веб-приложения.
PHP функции для перевода текста, ЧПУ, ссылок и имен файлов в транслит.
В статье приведен пример формы и php скрипта для безопасной загрузки файлов на сервер, метод отправки файлов через...
PHP функции для исправление неправильной раскладки клавиатуры в тексте и использование их в поиске по сайту.
Данный вопрос возникает при верстке писем т.к. стили прописанные в head в почтовых сервисах и программах не работают, а...
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать...