关于base64编码和解码的js工具函数

base64编码和解码的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)) // 霞霞要乖

总结

作者:weixin_44953227原文地址:https://blog.csdn.net/weixin_44953227/article/details/106927465

%s 个评论

要回复文章请先登录注册