百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

js中字符串转base64以及base64转字符串原理及实现

liuian 2025-03-14 18:45 17 浏览

今天刷codewars的题目的时候碰到一个通过js来实现字符串转base64的题目,base64虽然在js或nodejs中经常用,但是我还真没有仔细去看过原理以及如何实现,这回绕不过去了,赶紧找了找资料看了下。

先贴下参考资料

维基base64:
https://en.wikipedia.org/wiki/Base64

再贴下我个人粗浅的理解(不包括中文)

字符串转成base64 是对照码表来进行转化的,比如字符串abc ,将每个字符转成8位的二进制数据,然后将三个8位二进制组合起来,按照每6位一个字符重新转化,然后对照码表获得字符,当原数据不是3的整数倍时,如果最后剩下两个输入数据,在编码结果后加1个“=;如果最后剩下一个输入数据,编码结果后加2个“=;如果没有剩下任何数据,就什么都不要加,这样才可以保证资料还原的正确性。

base64 table index

以下以abcd进行举例。 abc 对应的二进制字符串为:
1100001_1100010_1100011_1100100
,然后将每个字符换成8位的数据,没有则前面补充0,变为
01100001_01100010_01100011_01100100
,然后将转化后的字符按照每6位分割,变为
011000_010110_001001_100011_011001_00xxxx
,如果不足六位则后面补充0,变为
011000_010110_001001_100011_011001_000000
.按照我粗浅的理解就是最后补充了4个0,那就加两个=,补充了两个0那就加1个=。具体讲解可以看维基。

维基讲解

那么,我们就可以按照上面的思路来进行一步一步的转化,当然,从base64转成字符串就相当于逆向操作是一样一样滴。

代码实现

String.prototype.toBase64 = function(){
    //字符串转base64,转为二级制(补全8位),然后按照6位(最高64)分割,然后补充后导0,添加=
    let code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
        str = this,
        res = '',
        binaryStr = '';
    for(let i=0,max = str.length;i<max;i++){
        let temp = str.charCodeAt(i).toString(2);
        binaryStr += new Array(9 - temp.length).join('0') + temp;
    }
    let tail = binaryStr.length % 6,
        left = binaryStr.substr(0,binaryStr.length - tail),
        right = binaryStr.substr(binaryStr.length - tail,binaryStr.length);
    //left first
    for(let i=0,max=left.length;i<max;i+=6){
        let temp = left.substr(i,6);
        let index = parseInt(temp,2);
        res += code[index];
    }
    //right after
    if(tail){
        right = right + new Array(7-right.length).join('0');
        res += code[parseInt(right,2)];
        //根据题目要求,去掉=
        res += new Array((6 - tail)/2 + 1 ).join('=');
    }
    return res;
}
String.prototype.fromBase64 = function(){
    //base64 转字符串,反过来即可
    let code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
    let str = this,res = '',binaryStr = '';
    var tail = 0;//如果有=号则处理
    for(let i=0,max = str.length;i<max;i++){
        if(str[i]== '='){
            tail ++;
        }else{
            let char = str[i],index = code.indexOf(char);
            //每个字符6位
            let temp = index.toString(2);
            binaryStr += new Array(7 - temp.length).join('0') + temp;
        }
    }
    //如果有=号,则需要重新处理下字符串
    binaryStr = binaryStr.substr(0,binaryStr.length - tail * 2);
    //split
    for(let i=0,max=binaryStr.length;i 0){
        let index = parseInt(temp,2);
        let char = String.fromCodePoint(Math.abs(index));
        res += char;
        }
    }
    return res;
}

var a = 'abcd'.toBase64();
console.log(a);
console.log(a.fromBase64())
//YWJjZA==
//abcd

以上代码不支持中文,而且性能和效率上也很差,主要是为了方便理解base64的转化,至于拿来用在生产的代码可以从网上找些,都是比较相似的。

/**
* UTF16和UTF8转换对照表
* U+00000000 – U+0000007F     0xxxxxxx
* U+00000080 – U+000007FF     110xxxxx 10xxxxxx
* U+00000800 – U+0000FFFF     1110xxxx 10xxxxxx 10xxxxxx
* U+00010000 – U+001FFFFF     11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
* U+00200000 – U+03FFFFFF     111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
* U+04000000 – U+7FFFFFFF     1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
*/
var Base64 = {
    // 转码表
    table : [
            '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', '+', '/'
    ],
    UTF16ToUTF8 : function(str) {
        var res = [], len = str.length;
        for (var i = 0; i < len i var code='str.charCodeAt(i);' if code> 0x0000 && code <= 0x007f 0x0000 u00000000 u0000007f 0xxxxxxx res.pushstr.charati else if code>= 0x0080 && code <= 0x07ff u00000080 u000007ff 110xxxxx 10xxxxxx 110xxxxx var byte1='0xC0' code>> 6) & 0x1F);
                // 10xxxxxx
                var byte2 = 0x80 | (code & 0x3F);
                res.push(
                    String.fromCharCode(byte1), 
                    String.fromCharCode(byte2)
                );
            } else if (code >= 0x0800 && code <= 0xffff u00000800 u0000ffff 1110xxxx 10xxxxxx 10xxxxxx 1110xxxx var byte1='0xE0' code>> 12) & 0x0F);
                // 10xxxxxx
                var byte2 = 0x80 | ((code >> 6) & 0x3F);
                // 10xxxxxx
                var byte3 = 0x80 | (code & 0x3F);
                res.push(
                    String.fromCharCode(byte1), 
                    String.fromCharCode(byte2), 
                    String.fromCharCode(byte3)
                );
            } else if (code >= 0x00010000 && code <= 0x001fffff u00010000 u001fffff 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx else if code>= 0x00200000 && code <= 0x03ffffff u00200000 u03ffffff 111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx else if code>= 0x04000000 && code <= 0x7FFFFFFF)*/ {
                // 六字节
                // U+04000000 – U+7FFFFFFF     1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
            }
        }

        return res.join('');
    },
    UTF8ToUTF16 : function(str) {
        var res = [], len = str.length;
        var i = 0;
        for (var i = 0; i < len i var code='str.charCodeAt(i);' if code>> 7) & 0xFF) == 0x0) {
                // 单字节
                // 0xxxxxxx
                res.push(str.charAt(i));
            } else if (((code >> 5) & 0xFF) == 0x6) {
                // 双字节
                // 110xxxxx 10xxxxxx
                var code2 = str.charCodeAt(++i);
                var byte1 = (code & 0x1F) << 6 var byte2='code2' 0x3f var utf16='byte1' byte2 res.pushsting.fromcharcodeutf16 else if code>> 4) & 0xFF) == 0xE) {
                // 三字节
                // 1110xxxx 10xxxxxx 10xxxxxx
                var code2 = str.charCodeAt(++i);
                var code3 = str.charCodeAt(++i);
                var byte1 = (code << 4 code2>> 2) & 0x0F);
                var byte2 = ((code2 & 0x03) << 6) | (code3 & 0x3F);
                var utf16 = ((byte1 & 0x00FF) << 8 byte2 res.pushstring.fromcharcodeutf16 else if code>> 3) & 0xFF) == 0x1E) {
                // 四字节
                // 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
            } else if (((code >> 2) & 0xFF) == 0x3E) {
                // 五字节
                // 111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
            } else /** if (((code >> 1) & 0xFF) == 0x7E)*/ {
                // 六字节
                // 1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
            }
        }

        return res.join('');
    },
    encode : function(str) {
        if (!str) {
            return '';
        }
        var utf8    = this.UTF16ToUTF8(str); // 转成UTF8
        var i = 0; // 遍历索引
        var len = utf8.length;
        var res = [];
        while (i < len var c1='utf8.charCodeAt(i++)' 0xff res.pushthis.tablec1>> 2]);
            // 需要补2个=
            if (i == len) {
                res.push(this.table[(c1 & 0x3) << 4]);
                res.push('==');
                break;
            }
            var c2 = utf8.charCodeAt(i++);
            // 需要补1个=
            if (i == len) {
                res.push(this.table[((c1 & 0x3) << 4) | ((c2 >> 4) & 0x0F)]);
                res.push(this.table[(c2 & 0x0F) << 2]);
                res.push('=');
                break;
            }
            var c3 = utf8.charCodeAt(i++);
            res.push(this.table[((c1 & 0x3) << 4) | ((c2 >> 4) & 0x0F)]);
            res.push(this.table[((c2 & 0x0F) << 2) | ((c3 & 0xC0) >> 6)]);
            res.push(this.table[c3 & 0x3F]);
        }

        return res.join('');
    },
    decode : function(str) {
        if (!str) {
            return '';
        }

        var len = str.length;
        var i   = 0;
        var res = [];

        while (i < len) {
            code1 = this.table.indexOf(str.charAt(i++));
            code2 = this.table.indexOf(str.charAt(i++));
            code3 = this.table.indexOf(str.charAt(i++));
            code4 = this.table.indexOf(str.charAt(i++));

            c1 = (code1 << 2 code2>> 4);
            res.push(String.fromCharCode(c1));

            if (code3 != -1) {
                c2 = ((code2 & 0xF) << 4 code3>> 2);
                res.push(String.fromCharCode(c2));
            }
            if (code4 != -1) {
                c3 = ((code3 & 0x3) << 6) | code4;
                res.push(String.fromCharCode(c3));
            }

        }

        return this.UTF8ToUTF16(res.join(''));
    }
};

var msg = 'Hello, oschina!又是一年春来到~!';
console.group('Test Base64: ');
var b64 = Base64.encode(msg);
console.log(b64);

d64 = Base64.decode(b64);
console.log(d64, d64 === msg);
console.groupEnd();

以上为js中字符串转base64的个人理解,仅供参考!

相关推荐

2023年最新微信小程序抓包教程(微信小程序 抓包)

声明:本公众号大部分文章来自作者日常学习笔记,部分文章经作者授权及其他公众号白名单转载。未经授权严禁转载。如需转载,请联系开百。请不要利用文章中的相关技术从事非法测试。由此产生的任何不良后果与文...

测试人员必看的软件测试面试文档(软件测试面试怎么说)

前言又到了毕业季,我们将会迎来许多需要面试的小伙伴,在这里呢笔者给从事软件测试的小伙伴准备了一份顶级的面试文档。1、什么是bug?bug由哪些字段(要素)组成?1)将在电脑系统或程序中,隐藏着的...

复活,视频号一键下载,有手就会,长期更新(2023-12-21)

视频号下载的话题,也算是流量密码了。但也是比较麻烦的问题,频频失效不说,使用方法也难以入手。今天,奶酪就来讲讲视频号下载的新方案,更关键的是,它们有手就会有用,最后一个方法万能。实测2023-12-...

新款HTTP代理抓包工具Proxyman(界面美观、功能强大)

不论是普通的前后端开发人员,还是做爬虫、逆向的爬虫工程师和安全逆向工程,必不可少会使用的一种工具就是HTTP抓包工具。说到抓包工具,脱口而出的肯定是浏览器F12开发者调试界面、Charles(青花瓷)...

使用Charles工具对手机进行HTTPS抓包

本次用到的工具:Charles、雷电模拟器。比较常用的抓包工具有fiddler和Charles,今天讲Charles如何对手机端的HTTS包进行抓包。fiddler抓包工具不做讲解,网上有很多fidd...

苹果手机下载 TikTok 旧版本安装包教程

目前苹果手机能在国内免拔卡使用的TikTok版本只有21.1.0版本,而AppStore是高于21.1.0版本,本次教程就是解决如何下载TikTok旧版本安装包。前期准备准备美区...

【0基础学爬虫】爬虫基础之抓包工具的使用

大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章,为实现从易到难全方位覆盖,特设【0基础学爬...

防止应用调试分析IP被扫描加固实战教程

防止应用调试分析IP被扫描加固实战教程一、概述在当今数字化时代,应用程序的安全性已成为开发者关注的焦点。特别是在应用调试过程中,保护应用的网络安全显得尤为重要。为了防止应用调试过程中IP被扫描和潜在的...

一文了解 Telerik Test Studio 测试神器

1.简介TelerikTestStudio(以下称TestStudio)是一个易于使用的自动化测试工具,可用于Web、WPF应用的界面功能测试,也可以用于API测试,以及负载和性能测试。Te...

HLS实战之Wireshark抓包分析(wireshark抓包总结)

0.引言Wireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口,直接...

信息安全之HTTPS协议详解(加密方式、证书原理、中间人攻击 )

HTTPS协议详解(加密方式、证书原理、中间人攻击)HTTPS协议的加密方式有哪些?HTTPS证书的原理是什么?如何防止中间人攻击?一:HTTPS基本介绍:1.HTTPS是什么:HTTPS也是一个...

Fiddler 怎么抓取手机APP:抖音、小程序、小红书数据接口

使用Fiddler抓取移动应用程序(APP)的数据接口需要进行以下步骤:首先,确保手机与计算机连接在同一网络下。在计算机上安装Fiddler工具,并打开它。将手机的代理设置为Fiddler代理。具体方...

python爬虫教程:教你通过 Fiddler 进行手机抓包

今天要说说怎么在我们的手机抓包有时候我们想对请求的数据或者响应的数据进行篡改怎么做呢?我们经常在用的手机手机里面的数据怎么对它抓包呢?那么...接下来就是学习python的正确姿势我们要用到一款强...

Fiddler入门教程全家桶,建议收藏

学习Fiddler工具之前,我们先了解一下Fiddler工具的特点,Fiddler能做什么?如何使用Fidder捕获数据包、修改请求、模拟客户端向服务端发送请求、实施越权的安全性测试等相关知识。本章节...

fiddler如何抓取https请求实现手机抓包(100%成功解决)

一、HTTP协议和HTTPS协议。(1)HTTPS协议=HTTP协议+SSL协议,默认端口:443(2)HTTP协议(HyperTextTransferProtocol):超文本传输协议。默认...