乐趣区

关于前端:一个神奇的小工具让URL地址都变成了ooooooooo

发现一个很有创意的小工具网站,如封面图所示性能很简略,就是将一个 URL 地址转换为都是 ooooooooo 的样子,通过转换后的地址拜访能够转换回到原始地址,简略流程如下图所示。转换的逻辑有点像短链平台一样,只不过这个是将你的 URL 地址变的很长长长长,然而看着都是 ooooooooo,很好奇是如何实现的,所以查阅了源码,本文解读其外围实现逻辑,很乏味且奇妙的实现了这个性能。

前置知识点

在正式开始前,先理解一些须要学习的知识点。因为波及到两个地址其实也就是字符串之间的转换,会用到一些编码和解码的能力。

将字符转为 utf8 数组,转换后的每个字符都有一个特定的惟一数值,比方 http 转换后的 utf8 格局数组即是 [104, 116, 116, 112]

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

将 Number 对象以 4 进制的模式示意为字符串,toString 用的比拟多,然而外面传入参数的场景比拟少,这个参数 radix 是一个可选的参数,用于指定转换的进制数,范畴为 2 ~ 36,如果未传入该参数,则默认应用 10 进制。

n.toString(4)

在字符串左侧填充指定字符,直到字符串达到指定长度。根本语法为 str.padStart(targetLength [, padString])

  • targetLength:必须,指定冀望字符串的最小长度,如果以后字符串小于这个长度,则会在左侧应用 padString 进行填充,直到字符串达到指定长度。
  • padString:可选,指定用于填充字符串的字符,默认为 ” “(空格)。
str.padStart(4, '0')

URL 编码 / 解码

上面正式开始 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", "ο", "о", "ᴏ"] 

最初的成果举例转换 http 这个字符:

  • 转换为 utf8 数组:[104, 116, 116, 112]
  • 转换为 4 进制并左侧补 0 到 4 位数:['1220', '1310', '1310', '1300']
  • 宰割转换为字符串数组:['1', '2', '2', '0', '1', '3', '1', '0', '1', '3', '1', '0', '1', '3', '0', '0']
  • 映射到 o 的不同模式:`[
    ‘ο’, ‘о’, ‘о’, ‘o’,
    ‘ο’, ‘ᴏ’, ‘ο’, ‘o’,
    ‘ο’, ‘ᴏ’, ‘ο’, ‘o’,
    ‘ο’, ‘ᴏ’, ‘o’, ‘o’
    ] `
  • 再次拼接为字符串,即转换实现后的 URL:οооoοᴏοoοᴏοoοᴏoo

到此整个转换编码的过程就完结了,看完后是不是感觉设计的很不错,编码完后就是解码,解码就是将下面的过程倒序来一遍,复原到最原始的 URL 地址。这里要留神一点的是每次解析 4 个字符且 parseInt 以 4 进制的形式进行解析。

// 获取 url 的 base 4 字符串示意
let b4str = ooo.split("").map(x => this.dec[x]).join("")

let utf8arr = []
// 每次解析 4 个字符
// 记住增加前导 0 的填充
for (let i = 0; i < b4str.length; i += 4)
    utf8arr.push(parseInt(b4str.substring(i, i + 4), 4))
// 返回解码后的字符串
return this.Utf8ArrayToStr(utf8arr) 

最初

到此就外围实现代码就分享完结了,看完是不是感觉并没有很简单,基于此设计或者能够延长出其余的字符成果,有趣味的也能够试试看。将转码后的地址分享给你的敌人们肯定会带来不一样的惊喜。

官网地址:「ooooooooooooooooooooooo.ooo」

上面是我转换的一个 AI 小工具地址,点击看看成果吧~

ooooooooooooooooooooooo.ooo/ooooοооoοᴏοoοᴏοoοᴏooοᴏoᴏoᴏооoоᴏᴏoоᴏᴏοоοᴏοоoᴏoоᴏоοоᴏоοоoοοоᴏоοоoᴏοооoοоοοοоᴏоοоοᴏoоᴏоοоοоοᴏοοοоᴏо

看完本文如果感觉有用,记得点个赞反对,珍藏起来说不定哪天就用上啦~

专一前端开发,分享前端相干技术干货,公众号:南城大前端(ID: nanchengfe)

退出移动版