前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >原生JS实现base64解码与编码

原生JS实现base64解码与编码

作者头像
IMWeb前端团队
发布2019-12-03 17:34:29
11.4K1
发布2019-12-03 17:34:29
举报
文章被收录于专栏:IMWeb前端团队

本文作者:IMWeb yuchenli 原文出处:IMWeb社区 未经同意,禁止转载

什么是base64

base64是用规定的64种字符来表示任意二进制数据的一种编码格式,而且这64种字符均是可见字符,而之所以要是可见的是因为在不同设备上处理不可见字符时可能发生错误。通常,电子邮件数据、公钥证书会经常使用。

base64编码原理

字符集

编码规则

我们知道单个字符一般用一个字节就可以表示(中文等其他特殊文字除外),而一个字节由8位二进制数构成。那么base64编码中,是将每6位二进制作为一个单位解析后参照字符集的索引就可以得到编码后的字符。举个例子:

代码语言:javascript
复制
二进制数据:000001 000011

编码后:BD

但是我们发现一个问题,就是我们单个字符是8位二进制,而base64编码时需要以6位二进制数位单位进行编码。那么多余的2位怎么去处理呢?看下面的栗子

代码语言:javascript
复制
未编码的字符串:B

对应的二进制数据: 010000 10

对残缺的二进制进行补足:010000 100000 000000 000000

编码后:Qg==

通过上面的栗子我们可以发现,base64编码时会将二进制通过在末尾补0的方式使其位数满足24的倍数。这样刚好能够编码出至少4个字符。从上面的栗子中我们可以看到=号的数量刚好是缺少2个字节数的数量,而g则是因为多余的2位二进制数补了4个0后编码成了g。所以我们就可以看到这样的编码了。如果还不理解再举一些栗子

代码语言:javascript
复制
未编码的字符串:BD

对应的二进制数据: 010000 100100 0100

对残缺的二进制进行补足:010000 100100 010000 000000

编码后:QkQ=

关于解码

这里不做详细解释,因为知道编码规则后,反过来就可以实现解码了。

原生JS实现其编码与解码

如果对JS熟悉的同学,可能会想到window对象的atob()和btoa()方法。但是只有在较新的游览器中才能使用,面对老的游览器,我们只能靠原生的JS自己造轮子了。

但是光知道编码原理一定够吗?这里依然存在两个问题:

  • 如何将字符串解析成二进制数据
  • 如何对中文字符进行编码

JS解析字符串为二进制数

首先在页面中所有的字符串都是基于unicode编码的,然后js的字符串中刚好有charCodeAt()方法返回指定字符的unicode编码对应的数值,这个数值就是二进制数表示的数值,我们只需要将其转换为二进制即可。熟悉c或者c++的同学可能会想到用不断的除2看余数的方式来求出这个数的二进制表示。但是在JS已经有现成的方法了。

代码语言:javascript
复制
var str = 'ABCD',
    i,
    len,
    result = '';
for( i = 0 , len = str.length ; i < len ; i++){
    result += str.charCodeAt(i).toString(2)
}
console.log(result);

编码中文字符

网页中编码格式基本都是UTF-8,然而即便我们用UTF-8格式保存了HTML文件,但是其中的中文字符依然是以UTF-16的形式保存的。所以我们首先要对utf-16的汉字转为utf-8形式保存的汉字。代码如下:

代码语言:javascript
复制
   // 将单个字符的unicode转换为以UTF-8格式的二进制数据
    function toUTF8Binary(unicode){
        var len,
            binary = '',
            star = 0,
            bitStream = unicode.toString(2), // 转换为二进制比特流
            bitLen = bitStream.length,
            i;
        if( unicode >= 0x000000 && unicode <= 0x00007F ){
            binary = bitStream;
            for( i = 0 , len = 8 ; i < len-bitLen ; i ++ ){
                binary = 0 + binary; // 不足8位补0
            }
        }else if( unicode >=0x000080 && unicode <=0x0007FF ){
            binary = bitStream;
            for( i = 0 , len = 11 ; i < len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足11位补0
            }
            binary = '110' +
                     binary.substr(0,5) + 
                     '10' + 
                     binary.substr(5,6);
        }
        else if( unicode >=0x000800 && unicode <=0x00FFFF ){
            binary = bitStream;
            for( i = 0 , len = 16 ; i < len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足16位补0
            };
            binary = '1110' + 
                     binary.substr(0,4) + 
                     '10' + 
                     binary.substr(4,6) + 
                     '10' + 
                     binary.substr(10,6);
        }
        else if( unicode >=0x010000 && unicode <=0x10FFFF ){
            binary = bitStream;
            for( i = 0 , len = 21 ; i < len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足21位补0
            }
            binary = '11110' + 
                     binary.substr(0,3) + 
                     '10' + 
                     binary.substr(3,6) + 
                     '10' + 
                     binary.substr(9,6) +
                     '10' + 
                     binary.substr(15,6);
        }
        return binary;
    }

以上两个问题解决了,就可以按照编码规则实现对base64的编码与解码了

最后附上完整代码

JS文件代码:

代码语言:javascript
复制
var codeHandler = (function(){
    var base64Chars = [
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
            'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
            'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
            'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
            'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
            'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
            'w', 'x', 'y', 'z', '0', '1', '2', '3',
            '4', '5', '6', '7', '8', '9', '+', '/'
        ],
        encode = {
            'base64':codeBase64
        },
        decode = {
            'base64':decodeBase64
        }
    handleFormat = {
        'utf-8':toUTF8Binary
    };
    function stringToBinary(str , size , encodeType ){
        //  str-字符串 , size - 转换后的二进制位数 ,encodeType - 采用什么格式去保存二进制编码
        var i,
            len,
            binary = '';
        for ( i = 0 , len = str.length ; i < len ; i++ ){
            binary = binary + handleFormat[encodeType.toLowerCase()](str.charCodeAt(i));
        }
        console.log(binary);
        return binary;
    }
    // 转换为以UTF-8格式的二进制数据
    function toUTF8Binary(unicode){
        var len,
            binary = '',
            star = 0,
            bitStream = unicode.toString(2), // 转换为二进制比特流
            bitLen = bitStream.length,
            i;
        if( unicode >= 0x000000 && unicode <= 0x00007F ){
            binary = bitStream;
            for( i = 0 , len = 8 ; i < len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足8位补0
            }
        }else if( unicode >=0x000080 && unicode <=0x0007FF ){
            binary = bitStream;
            for( i = 0 , len = 11 ; i < len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足11位补0
            }
            binary = '110'+binary.substr(0,5) + '10' + binary.substr(5,6);
        }
        else if( unicode >=0x000800 && unicode <=0x00FFFF ){
            binary = bitStream;
            for( i = 0 , len = 16 ; i < len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足16位补0
            };
            binary = '1110' + 
                     binary.substr(0,4) + 
                     '10' + 
                     binary.substr(4,6) + 
                     '10' + 
                     binary.substr(10,6);
        }
        else if( unicode >=0x010000 && unicode <=0x10FFFF ){
            binary = bitStream;
            for( i = 0 , len = 21 ; i < len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足21位补0
            }
            binary = '11110' + 
                     binary.substr(0,3) + 
                     '10' + 
                     binary.substr(3,6) + 
                     '10' + 
                     binary.substr(9,6) +
                     '10' + 
                     binary.substr(15,6);
        }
        return binary;
    }
    // 编码成base64格式
    function base64Parse(binary24,flag){
        var i,
            len,
            result = '',
            decode;
        if(flag == 1){
            for( i = 0 ; i < 4 ; i++){
                decode = parseInt(binary24.substr(i*6,6),2);
                result = result + base64Chars[decode];
            }
        }
        else{
            for ( i=0 , len = Math.floor(flag/6) ;i<len+1; i++){
                decode = parseInt(binary24.substr(i*6,6),2);
                result = result + base64Chars[decode];
            }
            for( i = 0; i < 3-len ;i ++){
                result = result + '=';
            }
        }
        return result;
    }
    // 解析为base64格式的二进制数据
    function codeBase64(str){
        var i,
            len,
            rem,
            mer,
            result = '',
            strBinaryAry = [],
            binary = stringToBinary(str , 8 , 'utf-8'); // base64是基于utf-8格式保存的二进制数据转换的
        len = binary.length;
        mer = Math.floor(len / 24);
        rem = len % 24;
        for( i = 0 ; i < mer ; i++){
            result = result +  base64Parse(binary.substr(i*24,24),1);
        }
        remCode = binary.substr(len-rem,rem);
        if( rem > 0 ){
            for( i =0 ; i < 24-rem ; i++){
                remCode = remCode + 0;
            }
            result = result +  base64Parse(remCode,rem)
        }
        return result;

    }
    // 解码base64格式的数据
    function decodeBase64(str){
        var i,
            j,
            k,
            len,
            t = 0,
            curbinary,
            start  = 0 ,
            flag = [
                {
                    str:'0',
                    len:8
                },
                {
                    str:'110',
                    len:11
                },
                {
                    str:'1110',
                    len:16
                },
                {
                    str:'11110',
                    len:21
                }],
            binary= '',
            newStr = '';
        for( i = 0 , len = str.length ; i < len ; i++){
            var curbinary  = base64Chars.indexOf(str.charAt(i)).toString(2);
            if( curbinary != '-1'){

                for( j = 0 ; curbinary.length <6 ; j++){
                    curbinary = 0 + curbinary;
                }
                binary = binary + curbinary;
            }
            if( i >= len-2 && str.charAt(i) == '='){
                ++t;
            }
        }
        if( t == 0 ){
            len = binary.length;
        }
        else{
            len = binary.length - (6-2*t)
        }

        for( ; start < len ;){
            for( j  = 0 ; j < 4 ; j++){

                if(binary.indexOf( flag[j].str ,start) == start){
                    if(flag[j].len == 8){
                        newStr = newStr +
                                 String.fromCharCode(parseInt(binary.substr(start,8),2));
                    }
                    else if(flag[j].len == 11){
                        newStr = newStr +
                                 String.fromCharCode(parsetInt(binary.substr(start+3,5) + 
                                 binary.substr(start+10,6),2));
                    }
                    else if(flag[j].len == 16){
                        newStr = newStr +     
                                 String.fromCharCode(parsetInt(binary.substr(start+4,4) + 
                                 binary.substr(start+10,6) + 
                                 binary.substr(start+18,6),2));
                    }
                    else if(flag[j].len == 21){
                        newStr = newStr + 
                                 String.fromCharCode(parseInt(binary.substr(start+5,3) + 
                                 binary.substr(start+10,6) + binary.substr(start+18,6) +
                                 binary.substr(start+26,6),2));
                    }
                    start  =  start  + flag[j].len;
                    break;
                }
            }
        }
        binary = null;
        return newStr;
    }
    return {
        encode:function(str ,type){
            return encode[type](str);
        },
        decode:function(str, type){
            return decode[type](str);
        }
    };
})();

HTML文件

代码语言:javascript
复制
<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>codeHandler</title>
    </head>    
    <body>
        <p>base64编码</p>
        <input id='test' type='text'></input>
        <button id="testButton">处理</button>
        <p>base64解码</p>
        <input id='test1' type='text'></input>
        <button id="testButton1">处理</button>
        <p id="showResult"></p>
        <script src="js/codeHandler.min.js"></script>
        <script>
            var input1 = document.getElementById('test'),
                button1 = document.getElementById('testButton'),
                input2 = document.getElementById('test1'),
                button2 = document.getElementById('testButton1'),
                show = document.getElementById('showResult');
            button1.onclick = function(){
                show =  codeHandler.encode(input1.value,'base64');
            }

            button2.onclick = function(){
                show =  codeHandler.decode(input2.value,'base64');
            }
        </script>
    </body> 
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-09-04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是base64
  • base64编码原理
    • 字符集
      • 编码规则
        • 关于解码
    • 原生JS实现其编码与解码
      • JS解析字符串为二进制数
        • 编码中文字符
          • 最后附上完整代码
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档