AngularJS实现的base64编码与解码功能示例


Posted in Javascript onMay 17, 2018

本文实例讲述了AngularJS实现的base64编码与解码功能。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>base64加密</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
 <script>
  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;
   }
  }
 </script>
</head>
<body>
<p id="p1">PHAgc3R5bGU9ImxpbmUtaGVpZ2h0OiAyZW07Ij48c3BhbiBzdHlsZT0iZm9udC1zaXplOiAxNnB4OyBmb250LWZhbWlseTog5b6u6L2v6ZuF6buRLCAnTWljcm9zb2Z0IFlhSGVpJzsiPu+7vzxpbWcgc3JjPSJodHRwOi8vd3d3LmpiNTEubmV0L2ltYWdlcy9sb2dvLmdpZiIgdGl0bGU9ImxvZ28uZ2lmIi8+PC9zcGFuPjwvcD48cCBzdHlsZT0idGV4dC1pbmRlbnQ6IDJlbTsgbGluZS1oZWlnaHQ6IDJlbTsiPjxzcGFuIHN0eWxlPSJmb250LXNpemU6IDE2cHg7IGZvbnQtZmFtaWx5OiDlvq7ova/pm4Xpu5EsICdNaWNyb3NvZnQgWWFIZWknOyI+5qyi6L+O6K6/6Zeu6ISa5pys5LmL5a62PC9zcGFuPjwvcD48cCBzdHlsZT0ibWFyZ2luLXRvcDogMHB4OyBtYXJnaW4tYm90dG9tOiAwcHg7IHBhZGRpbmc6IDBweDsgdGV4dC1pbmRlbnQ6IDJlbTsgY29sb3I6IHJnYigzNCwgMzQsIDM0KTsgZm9udC1mYW1pbHk6ICdNaWNyb3NvZnQgWWFIZWknLCDlvq7ova/pm4Xpu5E7IGZvbnQtc2l6ZTogMTRweDsgd2hpdGUtc3BhY2U6IG5vcm1hbDsgbGluZS1oZWlnaHQ6IDJlbTsiPjxzcGFuIHN0eWxlPSJmb250LXNpemU6IDE2cHg7IGZvbnQtZmFtaWx5OiDlvq7ova/pm4Xpu5EsICdNaWNyb3NvZnQgWWFIZWknOyI+6ISa5pys5LmL5a625piv5Zu95YaF5LiT5Lia55qE572R56uZ5bu66K6+6LWE5rqQ44CB6ISa5pys57yW56iL5a2m5Lmg57G7572R56uZ77yM5o+Q5L6bYXNw44CBcGhw44CBYXNwLm5ldOOAgWphdmFzY3JpcHTjgIFqcXVlcnnjgIF2YnNjcmlwdOOAgWRvc+aJueWkhOeQhuOAgee9kemhteWItuS9nOOAgee9kee7nOe8lueoi+OAgee9keermeW7uuiuvuetiee8lueoi+i1hOaWmeOAgjwvc3Bhbj48L3A+PHAgc3R5bGU9Im1hcmdpbi10b3A6IDBweDsgbWFyZ2luLWJvdHRvbTogMHB4OyBwYWRkaW5nOiAwcHg7IHRleHQtaW5kZW50OiAyZW07IGNvbG9yOiByZ2IoMzQsIDM0LCAzNCk7IGZvbnQtZmFtaWx5OiAnTWljcm9zb2Z0IFlhSGVpJywg5b6u6L2v6ZuF6buROyBmb250LXNpemU6IDE0cHg7IHdoaXRlLXNwYWNlOiBub3JtYWw7IGxpbmUtaGVpZ2h0OiAyZW07Ij48c3BhbiBzdHlsZT0iZm9udC1zaXplOiAxNnB4OyBmb250LWZhbWlseTog5b6u6L2v6ZuF6buRLCAnTWljcm9zb2Z0IFlhSGVpJzsiPui/memHjOi/mOaPkOS+m+Wkp+mHj+eahOa6kOeggeOAgeeUteWtkOS5puS4i+i9ve+8jOS7peWPiuWQhOenjeW4uOingeeahOWunueUqOWcqOe6v+W3peWFtzwvc3Bhbj48L3A+</p>
<script>
 var b = new Base64();
 str = document.getElementById("p1").innerHTML;
 //解密
 str = b.decode(str);
 document.getElementById("p1").innerHTML = str;
</script>
</body>
</html>

运行效果如下:

AngularJS实现的base64编码与解码功能示例

Javascript 相关文章推荐
Javascript学习笔记4 Eval函数
Jan 11 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
javascript中json基础知识详解
Jan 19 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
TS 类型收窄教程示例详解
Sep 23 Javascript
解决修复npm安装全局模块权限的问题
May 17 #Javascript
npm 下载指定版本的组件方法
May 17 #Javascript
ES6之模版字符串的具体使用
May 17 #Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 #Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 #Javascript
解决Mac安装thrift因bison报错的问题
May 17 #Javascript
Vue中的字符串模板的使用
May 17 #Javascript
You might like
怎样辨别一杯好咖啡
2021/03/03 新手入门
php 字符转义 注意事项
2009/05/27 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
JS 建立对象的方法
2007/04/21 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
标准版离职证明书
2014/09/12 职场文书
商超业务员岗位职责
2015/02/13 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
配置nginx 重定向到系统维护页面
2021/06/08 Servers