Unicode问题解法

有个小坑是它只支持ASCII. 如果你调用btoa("中文")会报错:

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

浏览器中DOMString是UTF-16编码. 如果输入字符串中包含超过8位(0x00~0xFF)的字符, 就会报这个错误.

思路一

对整个字符串进行转义(如使用encodeURIComponent 进行UTF-8转义)然后再btoa编码.

let Base64 = {
encode(str) {
// first we use encodeURIComponent to get percent-encoded UTF-8,
// then we convert the percent encodings into raw bytes which
// can be fed into btoa.
return btoa(encodeURIComponent(str).replace(/%([-9A-F]{})/g,
function toSolidBytes(match, p1) {
return String.fromCharCode('0x' + p1);
}));
},
decode(str) {
// Going backwards: from bytestream, to percent-encoding, to original string.
return decodeURIComponent(atob(str).split('').map(function (c) {
return '%' + ('' + c.charCodeAt().toString()).slice(-);
}).join(''));
}
}; let encoded = Base64.encode("哈ha"); // "5ZOIaGE="
let decoded = Base64.decode(encoded); // "哈ha"

思路二

将UTF-16的DOMString转化成UTF-8的字节数组然后编码.

MDN上此思路的解法用了很多库, 就不推荐了.

网上找到了下面这段代码, 思路是一样的, 但是是直接裸写的转换代码.

/**
*
* Base64 encode / decode
* http://www.webtoolkit.info
*
**/
var Base64 = { // private property
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=" // public method for encoding
, encode: function (input)
{
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = ; input = Base64._utf8_encode(input); while (i < input.length)
{
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++); enc1 = chr1 >> ;
enc2 = ((chr1 & ) << ) | (chr2 >> );
enc3 = ((chr2 & ) << ) | (chr3 >> );
enc4 = chr3 & ; if (isNaN(chr2))
{
enc3 = enc4 = ;
}
else if (isNaN(chr3))
{
enc4 = ;
} output = output +
this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
} // Whend return output;
} // End Function encode // public method for decoding
,decode: function (input)
{
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = ; input = input.replace(/[^A-Za-z0-\+\/\=]/g, "");
while (i < input.length)
{
enc1 = this._keyStr.indexOf(input.charAt(i++));
enc2 = this._keyStr.indexOf(input.charAt(i++));
enc3 = this._keyStr.indexOf(input.charAt(i++));
enc4 = this._keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << ) | (enc2 >> );
chr2 = ((enc2 & ) << ) | (enc3 >> );
chr3 = ((enc3 & ) << ) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != )
{
output = output + String.fromCharCode(chr2);
} if (enc4 != )
{
output = output + String.fromCharCode(chr3);
} } // Whend output = Base64._utf8_decode(output); return output;
} // End Function decode // private method for UTF-8 encoding
,_utf8_encode: function (string)
{
var utftext = "";
string = string.replace(/\r\n/g, "\n"); for (var n = ; n < string.length; n++)
{
var c = string.charCodeAt(n); if (c < )
{
utftext += String.fromCharCode(c);
}
else if ((c > ) && (c < ))
{
utftext += String.fromCharCode((c >> ) | );
utftext += String.fromCharCode((c & ) | );
}
else
{
utftext += String.fromCharCode((c >> ) | );
utftext += String.fromCharCode(((c >> ) & ) | );
utftext += String.fromCharCode((c & ) | );
} } // Next n return utftext;
} // End Function _utf8_encode // private method for UTF-8 decoding
,_utf8_decode: function (utftext)
{
var string = "";
var i = ;
var c, c1, c2, c3;
c = c1 = c2 = ; while (i < utftext.length)
{
c = utftext.charCodeAt(i); if (c < )
{
string += String.fromCharCode(c);
i++;
}
else if ((c > ) && (c < ))
{
c2 = utftext.charCodeAt(i + );
string += String.fromCharCode(((c & ) << ) | (c2 & ));
i += ;
}
else
{
c2 = utftext.charCodeAt(i + );
c3 = utftext.charCodeAt(i + );
string += String.fromCharCode(((c & ) << ) | ((c2 & ) << ) | (c3 & ));
i += ;
} } // Whend return string;
} // End Function _utf8_decode }

JS的base64编码解码的更多相关文章

  1. JS实现——Base64编码解码,带16进制显示

    在网上找了个JS实现的Base64编码转换,所以就想自己研究下,界面如下: 将代码以BASE64方式加密.解密 请输入要进行编码或解码的字符: 编码结果以ASCII码16进制显示 解码结果以ASCII ...

  2. js简单Base64编码解码

    var str = 'javascript'; window.btoa(str) //转码结果 "amF2YXNjcmlwdA==" window.atob("amF2Y ...

  3. 原生js实现Base64编码解码

    注:ie10+ var str = window.btoa("liusong"); console.log(str); var s = window.atob("bGl1 ...

  4. js的Base64编码与解码

    js的Base64编码与解码 pc和手机app项目中,经常需要将手机自带的表情图片转换特定的编码格式与后台进行交互. Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止 ...

  5. 原来浏览器原生支持JS Base64编码解码 outside of the Latin1 range

    原来浏览器原生支持JS Base64编码解码 « 张鑫旭-鑫空间-鑫生活 https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-bto ...

  6. 王小胖之 Base64编码/解码

    使用场景:编码网址作为URL参数,简单编码或加密数据,下载地址生成或解析. 实现功能:BASE64在线编码和解码. 数据实例:王小胖好啊,王小胖顶呱呱!! ~~ english 123 !@#$%^& ...

  7. 常用的js、java编码解码方法

    前言 前后端直接传输数据进行交互不就行了吗,为什么还要进行编码解码?正常情况下直接交互没问题,但当有类似以下情况出现时就需要进行编码再进行传输: 1.编码格式难以统一,导致数据交互过程出现中文乱码等问 ...

  8. OpenSSL 使用 base64 编码/解码

    简述 关于 OpenSSL 的介绍及安装请参见:Windows下编译OpenSSL 下面主要介绍有关 OpenSSL 使用 base64 编码/解码. 简述 编码解码 更多参考 编码/解码 #incl ...

  9. 利用openssl进行BASE64编码解码、md5/sha1摘要、AES/DES3加密解密

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

随机推荐

  1. java项目路径总结,java.io.File支持的路放方式

    1.直接输入路径 已maven项目为例,直接输入路径的4种方式,即是File类支持的方式: /** * FileOutpurStream以字节数组方式写入文件 * @throws IOExceptio ...

  2. 李代数E8 的根系 python绘图

    安装前需安装依赖:(针对Centos7) yum install -y cairo pip install cairocffi 源代码:https://github.com/neozhaoliang/ ...

  3. Pat 1003 甲级

    #include <cstdlib> #include <cstring> #include <iostream> #include <cstdio> ...

  4. 如何学习numpy

    可以通过官方中文文档 NumPy 中文文档

  5. BST二叉树的二分查找

    900. 二叉搜索树中最接近的值 中文 English 给一棵非空二叉搜索树以及一个target值,找到在BST中最接近给定值的节点值 样例 样例1 输入: root = {5,4,9,2,#,8,1 ...

  6. 点击一个超链接,弹出固定大小的新窗口(js实现)

    1.最基本的弹出窗口代码 <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html') --> ...

  7. 项目Beta冲刺(团队) —— 凡事预则立

    1.讨论组长是否重选的议题和结论 讨论: 我们采取匿名群投票的方式进行 投票结果如下: 成员共7人 投票7人 投票率100% 结果有效 结论: 不需要重选组长 2.下一阶段需要改进完善的功能 完善游戏 ...

  8. Spring Boot 中的事务管理

    希望能在发生异常的时候被回退,这时候就可以使用事务让它实现回退,做法非常简单,我们只需要在test函数上添加@Transactional注解即可. 使用@Transactional注解来声明一个函数需 ...

  9. iOS 开发,相关网址

    iOS 开发,相关网址 说明 网址 注册开发者 https://developer.apple.com/cn/programs/enroll/ 未付费688个人开发账号真机调试测试教程 http:// ...

  10. HDU6625: three arrays (字典树处理xor)

    题意:给出A数组,B数组,你可以对A和B分别进行重排列,使得C[i]=A[i]^B[i]的字典序最小. 思路:对于这类题,显然需要建立字典树,然后某种形式取分治,或者贪心.  假设现在有了两颗字典树A ...