一个神奇的工具,让URL地址都变成了"ooooooooo"
最近发现一个有意思工具,就是将一个URL地址转换为都是 ooooooooo
的样子,通过转换后的地址拜访能够转换回到原始地址,转换的逻辑有点像短链平台一样,然而这个工具他是将你的URL地址变的很长长长长,然而看着都是 ooooooooo
,集体感觉蛮有意思的,于是找到了它的源码仓库,便查阅了一番。顺便给大家讲讲实现逻辑。
一、外围代码
波及到两个地址其实也就是字符串之间的转换,会用到一些编码和解码。
将字符转为utf8数组,转换后的每个字符都有一个特定的惟一数值,比方 https
转换后的 utf8 格局数组即是 [104, 116, 116, 112, 115]
toUTF8Array(str) { var utf8 = []; for (var i = 0; i < str.length; i++) { var charcode = str.charCodeAt(i); if (charcode < 0x80) utf8.push(charcode); else if (charcode < 0x800) { utf8.push(0xc0 | (charcode >> 6), 0x80 | (charcode & 0x3f)); } else if (charcode < 0xd800 || charcode >= 0xe000) { utf8.push(0xe0 | (charcode >> 12), 0x80 | ((charcode >> 6) & 0x3f), 0x80 | (charcode & 0x3f)); } else { i++; charcode = ((charcode & 0x3ff) << 10) | (str.charCodeAt(i) & 0x3ff) utf8.push(0xf0 | (charcode >> 18), 0x80 | ((charcode >> 12) & 0x3f), 0x80 | ((charcode >> 6) & 0x3f), 0x80 | (charcode & 0x3f)); } } console.log(utf8, 'utf8'); return utf8; }
对应上面的则是解码,将utf8数组转换为字符串,比方 [99, 111, 109]
转换后的 utf8 格局数组即是 com
。
Utf8ArrayToStr(array) { var out, i, len, c; var char2, char3; out = ""; len = array.length; i = 0; while (i < len) { c = array[i++]; switch (c >> 4) { case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7: // 0xxxxxxx out += String.fromCharCode(c); break; case 12: case 13: // 110x xxxx 10xx xxxx char2 = array[i++]; out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F)); break; case 14: // 1110 xxxx 10xx xxxx 10xx xxxx char2 = array[i++]; char3 = array[i++]; out += String.fromCharCode(((c & 0x0F) << 12) | ((char2 & 0x3F) << 6) | ((char3 & 0x3F) << 0)); break; } } return out; }
二、URL编码/解码
- 转换为utf8数组
- 转换为4进制并左侧补0到4位数
- 宰割转换为字符串数组
- 映射到o的不同模式
- 再次拼接为字符串,即转换实现后的URL
// 获取utf8数组let unversioned = this.toUTF8Array(url) // 转换为base 4字符串 // padstart十分重要!否则会失落前导0 .map(n => n.toString(4).padStart(4, "0")) // 转换为字符数组 .join("").split("") // 映射到o的不同模式 .map(x => this.enc[parseInt(x)]) // 连接成单个字符串 .join("")
留神:映射到o的不同模式这个是什么意思呢?其实转换后的o
并不是一种“o
”,而是4种,只不过咱们肉眼看到的成果很像,通过encodeURI
转换后的字符能够看进去。
encodeURI('o---')// o-%CE%BF-%D0%BE-%E1%B4%8F
为什么是转换为4进制和左侧补0到四位数。因为下面代码定义的this.enc
如下,因为总共只有四种“o”,4进制只会产生0,1,2,3
,这样就能够将转换后的utf8字符一一对应上这几种非凡的“o”。
enc = ["o", "", "", ""]
上述编码之后,还不能失常拜访,想失常拜访还需拼接一些货色:
let url = 'https://ooooooooooooooooooooooo.ooo/oooo'+ this.unversioned;
编码完后就是解码,解码就是将下面的过程倒序来一遍,复原到最原始的URL地址。这里要留神一点的是每次解析4个字符且parseInt以4进制的形式进行解析。
let b4str = ooo.split("").map(x => this.dec[x]).join("")let utf8arr = []// parse 4 characters at a time (255 in b10 = 3333 in b4)// remember adding leading 0s paddingfor (let i = 0; i < b4str.length; i += 4) utf8arr.push(parseInt(b4str.substring(i, i + 4), 4))return this.Utf8ArrayToStr(utf8arr)
留神,解码时变量ooo
是没有拼接货色的,也就是说它是编码时unversioned
的后果。如果拼接了货色,学把拼接的字符截取后在进行解码。
上面是我转换的一个在线工具地址,点击看看成果吧~
>ooooooooooooooooooooooo.ooo/ooooo…