js实现Base64编码(无+与=符号)，缩短url链接参数

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

通常需要在地址栏拼接参数的话都会使用encodeURIComponent()来编码一下，兼容性很好但是当参数比较复杂的时候编码出来的字符串会很长。

链接过长的弊端有很多，比如在跳转回调等过程中丢参（微信中常见），被截断（登录使用了平台登录需要来回跳转）；

使用base64编码出来的字符串长度会短很多，但是一般不采用这种方式，具体在下面说明

先看一个简单的字符串的两张编码方式对比：

encodeURIComponent('一二三四五')
//生成结果 "%E4%B8%80%E4%BA%8C%E4%B8%89%E5%9B%9B%E4%BA%94"
btoa(unescape(encodeURIComponent('一二三四五')))
//生成结果 "5LiA5LqM5LiJ5Zub5LqU"

可以看到，即使是这样简单的字符编码出来的长度差异也很大；

但是使用btoa(unescape(encodeURIComponent('一二三四五')))这样原生的方式生成的字符串不可以直接拼接到地址上

原因是编码出来的字符串带有+ =，这俩符号直接拼在地址中很容易被解析成空格或者连接符导致地址被截断参数丢失；

基于以上原因修改了网上常见的一个Base64编码实现方式，主要是使用*与~替换了+ =； 在业务中实际应用了下，经过业务测试，兼容性测试(移动端)等都可以通过；

代码如下

/**
 * @author AmsWait
 * 这个版本修改了keyStr用*号替代了+号
 * 修改方式是修改keyStr中包含的符号然后在decode的input正则内修改相应的符号
 * @example var Base64 = new Base64();  Base64.encode('123')
 */
function Base64() {

    var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789*/~";

    this.encode = function (input) {
	    if (typeof input !== 'string') { throw Error('仅支持字符串类型的编码转换~') };
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;
        input = utf8Encode(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;
    };

    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 = utf8Decode(output);
        return output;
    };

    utf8Encode = 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;
    };

    utf8Decode = function (utfText) {
        var string = "";
        var i = 0;
        var c = 0;
        var c1 = 0;
        var c2 = 0;
        while (i < utfText.length) {
            c = utfText.charCodeAt(i);
            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            } else if ((c > 191) && (c < 224)) {
                c1 = utfText.charCodeAt(i + 1);
                string += String.fromCharCode(((c & 31) << 6) | (c1 & 63));
                i += 2;
            } else {
                c1 = utfText.charCodeAt(i + 1);
                c2 = utfText.charCodeAt(i + 2);
                string += String.fromCharCode(((c & 15) << 12) | ((c1 & 63) << 6) | (c2 & 63));
                i += 3;
            }
        }
        return string;
    }
}

我的个人公众号：归元田居 每日分享前端知识与资讯～