JS 实现Base64编码与解码实例详解


Posted in Javascript onNovember 07, 2016

Js实现Base64编码与解码

Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍。

Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符。

Base64常用于在通常处理文本数据的场合,表示、传输、存储一些二进制数据。包括MIME的email,email via MIME, 在XML中存储复杂数据。

1.加密解密方法使用:

//1.加密 
var str = '124中文内容'; 
var base = new Base64(); 
var result = base.encode(str); 
//document.write(result); 
//2.解密 
var result2 = base.decode(result); 
document.write(result2);

2.加密、解密算法封装:

/** 
* 
* Base64 encode / decode 
* 
* @author haitao.tu 
* @date 2010-04-26 
* @email tuhaitao@foxmail.com 
* 
*/ 
function Base64() { 
 
 // private property 
 _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; 
 
 // public method for encoding 
 this.encode = function (input) { 
  var output = ""; 
  var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 
  var i = 0; 
  input = _utf8_encode(input); 
  while (i < input.length) { 
   chr1 = input.charCodeAt(i++); 
   chr2 = input.charCodeAt(i++); 
   chr3 = input.charCodeAt(i++); 
   enc1 = chr1 >> 2; 
   enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 
   enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 
   enc4 = chr3 & 63; 
   if (isNaN(chr2)) { 
    enc3 = enc4 = 64; 
   } else if (isNaN(chr3)) { 
    enc4 = 64; 
   } 
   output = output + 
   _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + 
   _keyStr.charAt(enc3) + _keyStr.charAt(enc4); 
  } 
  return output; 
 } 
 
 // public method for decoding 
 this.decode = function (input) { 
  var output = ""; 
  var chr1, chr2, chr3; 
  var enc1, enc2, enc3, enc4; 
  var i = 0; 
  input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); 
  while (i < input.length) { 
   enc1 = _keyStr.indexOf(input.charAt(i++)); 
   enc2 = _keyStr.indexOf(input.charAt(i++)); 
   enc3 = _keyStr.indexOf(input.charAt(i++)); 
   enc4 = _keyStr.indexOf(input.charAt(i++)); 
   chr1 = (enc1 << 2) | (enc2 >> 4); 
   chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); 
   chr3 = ((enc3 & 3) << 6) | enc4; 
   output = output + String.fromCharCode(chr1); 
   if (enc3 != 64) { 
    output = output + String.fromCharCode(chr2); 
   } 
   if (enc4 != 64) { 
    output = output + String.fromCharCode(chr3); 
   } 
  } 
  output = _utf8_decode(output); 
  return output; 
 } 
 
 // private method for UTF-8 encoding 
 _utf8_encode = function (string) { 
  string = string.replace(/\r\n/g,"\n"); 
  var utftext = ""; 
  for (var n = 0; n < string.length; n++) { 
   var 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; 
 } 
 
 // private method for UTF-8 decoding 
 _utf8_decode = function (utftext) { 
  var string = ""; 
  var i = 0; 
  var c = c1 = c2 = 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; 
 } 
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
js图片轮播插件的封装
Jul 21 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 #Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 #Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 #Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 #Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 #Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 #Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 #Javascript
You might like
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python的语言类型(详解)
2017/06/24 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
Python爬虫开发与项目实战
2020/12/16 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
2014年学生会部门工作总结
2014/11/07 职场文书
花田少年史观后感
2015/06/16 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
Python实现拼音转换
2021/06/07 Python
python迷宫问题深度优先遍历实例
2021/06/20 Python
Python实现打乒乓小游戏
2021/09/25 Python
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏