一个神奇的工具，让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;
}</code></pre><h2 id="item-0-2">二、URL编码/解码</h2><ol><li>转换为utf8数组</li><li>转换为4进制并左侧补0到4位数</li><li>分割转换为字符串数组</li><li>映射到o的不同形式</li><li>再次拼接为字符串，即转换完成后的<a href="https://link.segmentfault.com/?enc=Gi6ndxzUv2PKpS4X03ijTg%3D%3D.v%2BDtuEgOhWjdjTKGp5m3j0WtD4j%2B9sv7Sf2Z0do4H%2Bk%3D" rel="nofollow" target="_blank">URL</a></li></ol><pre><code class="javascript"> // 获取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("")</code></pre><blockquote>注意：映射到o的不同形式这个是什么意思呢？其实转换后的<code>o</code>并不是一种“<code>o</code>”，而是4种，只不过我们肉眼看到的效果很像，通过 <code>encodeURI</code> 转换后的字符可以看出来。</blockquote><pre><code class="javascript">encodeURI('o-ο-о-ᴏ')
// o-%CE%BF-%D0%BE-%E1%B4%8F</code></pre><blockquote>为什么是转换为4进制和左侧补0到四位数。因为上面代码定义的 <code>this.enc</code> 如下，因为总共只有四种“o”，4进制只会产生 <code>0，1，2，3</code>，这样就可以将转换后的utf8字符一一对应上这几种特殊的“o”。</blockquote><pre><code class="javascript">enc = ["o", "ο", "о", "ᴏ"] </code></pre><p>上述编码之后，还不能正常访问，想正常访问还需拼接一些东西：</p><pre><code class="javascript">let url = 'https://ooooooooooooooooooooooo.ooo/oooo'+ this.unversioned;</code></pre><p> 编码完后就是解码，解码就是将上面的过程倒序来一遍，恢复到最原始的URL地址。这里要注意一点的是每次解析4个字符且parseInt以4进制的方式进行解析。</p><pre><code class="javascript">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 padding
for (let i = 0; i < b4str.length; i += 4)
utf8arr.push(parseInt(b4str.substring(i, i + 4), 4))
return this.Utf8ArrayToStr(utf8arr)</code></pre><blockquote>注意，解码时变量<code>ooo</code>是没有拼接东西的，也就是说它是编码时 <code>unversioned</code>的结果。如果拼接了东西，学把拼接的字符截取后在进行解码。</blockquote><p>下面是我转换的一个在线工具地址，点击看看效果吧~<br><a href="https://link.segmentfault.com/?enc=hh8xiPP%2Bohe6kuK6bURi%2FQ%3D%3D.cjWQOUFC7ZDyFjvlLPOwmX0Q2OU7AZOrsW8TBgkI1el%2FBCLZThDSUDFrMB91gfWvhYB5v8Ejk33wKqNCEHnNYa4Qj73cqfhg8LlI76TpsEVzQupF%2BmNfVaj7po%2FRM0CxOYVmmDufqMgtJlX69tEp1Zl0XU6XLUrIC%2Bc%2FiSP64DB6tjg3Cakfrgj95SJDIdhJ3Mnw4ZPUDt78sjEb9wJf9VhE4KObhMyZ3wgUTKfW%2F8lquM0bs%2BrlTIbhmv5VTM6oDY6rzL5Lbs7iOHegGOYTshxK5y9oLjqUIQfzsEvFNE5TF8rAcIorR4lCNPL%2BJjsgvxTAAQECJFQ%2FkvDyYwZ5j0%2BSdU5eYy7jdPvj7WAj90ctXFagN8rn0hUXwdDXbdf4eUAHQSAOcFHL5%2F36AZGMVn10dwts33gc%2F87xGSLd%2FgutRw7I4uUQdMQRnrHElULi8aDcmmmR9i889zpEYeujjlnVVqCkDsJGocGuPw6WJibsWF4OinNsxjbCw3Cp5SLflwsH3%2Fj9Px7YbmR8mrHGPTQeueZUWDNZAlq%2BXDz%2FQl64t%2BS%2F3EWVnrenvw7CowbWfEuGtSH0HuyloiGhDnjSXPbOjDB9BouVTLBJ2eCMBaDH1LxZWeB5W%2F2Y0GAZskOYKbxWoS3y2lYQM%2BebH8loOS5t4Rhqu1feCSxCvIYwKt45soFzbyPUCjGrAMdYknXVMKQ%2FUPsOMFJtICgmx1ISZKEFGaPCeBcVPRlHCSkh%2FkmPyYEstXrrkaLLZrdj%2FOGt" rel="nofollow" target="_blank">>ooooooooooooooooooooooo.ooo/ooooοооoοᴏο…</a></p>
