关于base64编码和解码的js工具函数
weixin_44953227 人气:0base64编码和解码的js工具函数
上代码
// 使用 const base64 = new Base64Code() const str = '你好' const en = base64.enCode(str) const de = base64.deCode(en) console.log(en, 'base64编码') // 5L2g5aW9 console.log(de, 'base64解码') // 你好
|| 中文也可以进行编码, 里面已经对数据UTF-8转码再base64编码
// base64函数 function Base64Code() { // base64 character set, plus padding character (=) var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", // Regular expression to check formal correctness of base64 encoded strings b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/; // 转UTF-8格式编码 private method for UTF-8 encoding const utf8Encode = function (str) { let string = str; string = string.replace(/\r\n/g, '\n'); let utfText = ''; for (let n = 0; n < string.length; n++) { const c = string.charCodeAt(n); if (c < 128) { utfText += String.fromCharCode(c); } else if ((c > 127) && (c < 2048)) { utfText += String.fromCharCode((c >> 6) | 192); utfText += String.fromCharCode((c & 63) | 128); } else { utfText += String.fromCharCode((c >> 12) | 224); utfText += String.fromCharCode(((c >> 6) & 63) | 128); utfText += String.fromCharCode((c & 63) | 128); } } return utfText; }; // 解UTF-8格式编码 private method for UTF-8 decoding const utf8Decode = function (utfText) { let string = ''; let i = 0; let c = 0; let c2 = 0; let c3 = 0; while (i < utfText.length) { c = utfText.charCodeAt(i); if (c < 128) { string += String.fromCharCode(c); i++; } else if ((c > 191) && (c < 224)) { c2 = utfText.charCodeAt(i + 1); string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); i += 2; } else { c2 = utfText.charCodeAt(i + 1); c3 = utfText.charCodeAt(i + 2); string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); i += 3; } } return string; }; // base64编码 this.enCode = function(string) { string = utf8Encode(String(string)); var bitmap, a, b, c, result = "", i = 0, rest = string.length % 3; // To determine the final padding for (; i < string.length;) { if ((a = string.charCodeAt(i++)) > 255 || (b = string.charCodeAt(i++)) > 255 || (c = string.charCodeAt(i++)) > 255) throw new TypeError("Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range."); bitmap = (a << 16) | (b << 8) | c; result += b64.charAt(bitmap >> 18 & 63) + b64.charAt(bitmap >> 12 & 63) + b64.charAt(bitmap >> 6 & 63) + b64.charAt(bitmap & 63); } // If there's need of padding, replace the last 'A's with equal signs return rest ? result.slice(0, rest - 3) + "===".substring(rest) : result; }; // base64解码 this.deCode = function(string) { // atob can work with strings with whitespaces, even inside the encoded part, // but only \t, \n, \f, \r and ' ', which can be stripped. string = String(string).replace(/[\t\n\f\r ]+/g, ""); if (!b64re.test(string)) throw new TypeError("Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded."); // Adding the padding if missing, for semplicity string += "==".slice(2 - (string.length & 3)); var bitmap, result = "", r1, r2, i = 0; for (; i < string.length;) { bitmap = b64.indexOf(string.charAt(i++)) << 18 | b64.indexOf(string.charAt(i++)) << 12 | (r1 = b64.indexOf(string.charAt(i++))) << 6 | (r2 = b64.indexOf(string.charAt(i++))); result += r1 === 64 ? String.fromCharCode(bitmap >> 16 & 255) : r2 === 64 ? String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255) : String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255, bitmap & 255); } return utf8Decode(result); }; }
前端实现base64解码编码
本文描述了三种前端实现base64解码和编码的方法
Base64 在线编码解码工具 https://base64.us/
方法一:btoa 和 atob
btoa 和 atob 是window对象上的两个函数,window.atob()解码,window.btoa()编码
let encodeText = 'xiaxiayaoguai' let decodeText = 'eGlheGlheWFvZ3VhaQ==' console.log(atob(decodeText)) // xiaxiayaoguai console.log(btoa(encodeText)) // eGlheGlheWFvZ3VhaQ==
Unicode字符编码报错
这里我们将encodeText = '霞霞要乖'
再进行解码就会出现以下报错,因为btoa不支持Unicode字符编码
Failed to execute ‘btoa’ on ‘Window’: The string to be encoded contains characters outside of the Latin1 range.
报错解决办法:
- 编码时,先用
encodeURIComponent
对字符串进行编,再用btoa
进行Base64编码; - 解码时,先用
atob
对Base64编码的串进行解码,再用decodeURIComponent
对字符串进行解码
let encodeText = '霞霞要乖' let decodeText = 'JUU5JTlDJTlFJUU5JTlDJTlFJUU4JUE2JTgxJUU0JUI5JTk2' console.log(btoa(encodeURIComponent(encodeText))) // JUU5JTlDJTlFJUU5JTlDJTlFJUU4JUE2JTgxJUU0JUI5JTk2 console.log(decodeURIComponent(atob(decodeText))) // 霞霞要乖
方法二:下包
下包
npm install --save js-base64
使用
<script> import {Base64} from 'js-base64' // 引入 export default { data() { return { encodeText:'霞霞要乖', decodeText:'6Zye6Zye6KaB5LmW', } }, created(){ this.transformBase64() }, methods: { transformBase64(){ console.log('编码:', Base64.encode(this.encodeText)) // 6Zye6Zye6KaB5LmW console.log('解码:', Base64.decode(this.decodeText)) // 霞霞要乖 } } } </script>
方法三:js实现
构建函数
let Base64 = { keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", 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(/rn/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 } }
使用
let encodeText = '霞霞要乖' let decodeText = '6Zye6Zye6KaB5LmW' console.log(Base64.encode(encodeText)) // 6Zye6Zye6KaB5LmW console.log(Base64.decode(decodeText)) // 霞霞要乖
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容