一个神奇的小工具，让 URL 地址都变成了"ooooooooo"
发现一个很有创意的小工具网站，如封面图所示功能很简单，就是将一个 URL 地址转换为都是 ooooooooo 的样子，通过转换后的地址访问可以转换回到原始地址，简单流程如下图所示。转换的逻辑有点像短链平台一样，只不过这个是将你的 URL 地址变的很长长长长，但是看着都是 ooooooooo，很好奇是如何实现的，所以查阅了源码，本文解读其核心实现逻辑，很有趣且巧妙的实现了这个功能。
前置知识点
在正式开始前，先了解一些需要学习的知识点。因为涉及到两个地址其实也就是字符串之间的转换，会用到一些编码和解码的能力。
将字符转为 utf8 数组，转换后的每个字符都有一个特定的唯一数值，比如 http 转换后的 utf8 格式数组即是 [104, 116, 116, 112]。
上面是编码，对应下面的则是解码，将 utf8 数组转换为字符串，比如 [99, 111, 109] 转换后的 utf8 格式数组即是 com。
将 Number 对象以 4 进制的形式表示为字符串，toString 用的比较多，但是里面传入参数的场景比较少，这个参数 radix 是一个可选的参数，用于指定转换的进制数，范围为 2 ~ 36，如果未传入该参数，则默认使用 10 进制。
在字符串左侧填充指定字符，直到字符串达到指定长度。基本语法为 str.padStart(targetLength [, padString])。
targetLength：必需，指定期望字符串的最小长度，如果当前字符串小于这个长度，则会在左侧使用 padString 进行填充，直到字符串达到指定长度。
padString：可选，指定用于填充字符串的字符，默认为 " "（空格）。
URL 编码/解码
下面正式开始 URL 编码的逻辑，核心的逻辑如下：
转换为 utf8 数组
转换为 4 进制并左侧补 0 到 4 位数
分割转换为字符串数组
映射到 o 的不同形式
再次拼接为字符串，即转换完成后的 URL
上面有两个关键点解释一下，首先映射到 o 的不同形式这个是什么意思呢？其实转换后的 o 并不是一种“o”，而是 4 种，只不过我们肉眼看到的效果很像，通过 encodeURI 转换后的字符可以看出来。
这里其实也解释了为什么上面为什么是转换为 4 进制和左侧补 0 到四位数。因为上面代码定义的 this.enc 如下，因为总共只有四种“o”，4 进制只会产生0，1，2，3，这样就可以将转换后的 utf8 字符一一对应上这几种特殊的“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 进制的方式进行解析。
最后
到此就核心实现代码就分享结束了，看完是不是感觉并没有很复杂，基于此设计或许可以延伸出其他的字符效果，有兴趣的也可以试试看。将转码后的地址分享给你的朋友们一定会带来不一样的惊喜。
官网地址：「ooooooooooooooooooooooo.ooo」
下面是我转换的一个 AI 小工具地址，点击看看效果吧~
看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
版权声明: 本文为 InfoQ 作者【南城FE】的原创文章。
原文链接:【http://xie.infoq.cn/article/4b1337087277ac9c9f7e7ccb7】。文章转载请联系作者。
还未添加个人签名 2019-02-12 加入
专注前端开发，分享前端知识
评论