原生JS实现base64解码与编码

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

字符集

编码规则

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

二进制数据：000001 000011

编码后:BD

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

未编码的字符串:B

对应的二进制数据: 010000 10

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

编码后:Qg==

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

未编码的字符串:BD

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

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

编码后:QkQ=

关于解码

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

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

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

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

JS解析字符串为二进制数

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

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形式保存的汉字。代码如下:

   // 将单个字符的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文件代码:

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文件

<!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.innerHTML =  codeHandler.encode(input1.value,"base64");
            }

            button2.onclick = function(){
                show.innerHTML =  codeHandler.decode(input2.value,"base64");
            }
        </script>
    </body> 
</html>