一个神奇的小工具,让URL地址都变成了“ooooooooo“

这篇具有很好参考价值的文章主要介绍了一个神奇的小工具,让URL地址都变成了“ooooooooo“。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

转换的逻辑有点像短链平台一样,只不过这个是将你的URL地址变的很长长长长,但是看着都是 ooooooooo,很好奇是如何实现的,所以查阅了源码,本文解读其核心实现逻辑,很有趣且巧妙的实现了这个功能。

发现一个很有创意的小工具网站,如封面图所示功能很简单,就是将一个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;
    }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.

上面是编码,对应下面的则是解码,「将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;
    }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.

「将 Number 对象以 4 进制的形式表示为字符串」,toString 用的比较多,但是里面传入参数的场景比较少,这个参数 radix 是一个可选的参数,用于指定转换的进制数,范围为 2 ~ 36,如果未传入该参数,则默认使用 10 进制。

n.toString(4)
  • 1.

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

  • targetLength:必需,指定期望字符串的最小长度,如果当前字符串小于这个长度,则会在左侧使用 padString 进行填充,直到字符串达到指定长度。
  • padString:可选,指定用于填充字符串的字符,默认为 " "(空格)。
str.padStart(4, '0')
  • 1.

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("")
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

上面有两个关键点解释一下,首先映射到o的不同形式这个是什么意思呢?其实转换后的o并不是一种“o”,而是4种,只不过我们肉眼看到的效果很像,通过 encodeURI 转换后的字符可以看出来。

encodeURI('o-ο-о-ᴏ')
// o-%CE%BF-%D0%BE-%E1%B4%8F
  • 1.
  • 2.

这里其实也解释了为什么上面为什么是转换为4进制和左侧补0到四位数。因为上面代码定义的 this.enc 如下,因为总共只有四种“o”,4进制只会产生0,1,2,3,这样就可以将转换后的utf8字符一一对应上这几种特殊的“o”。

enc = ["o", "ο", "о", "ᴏ"]
  • 1.

最后的效果举例转换 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)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

最后

到此就核心实现代码就分享结束了,看完是不是感觉并没有很复杂,基于此设计或许可以延伸出其他的字符效果,有兴趣的也可以试试看。将转码后的地址分享给你的朋友们一定会带来不一样的惊喜,下面是我转换的一个AI小工具地址,点击看看效果吧~

官网地址:「ooooooooooooooooooooooo.ooo」

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

 文章来源地址https://www.toymoban.com/news/detail-456487.html

到了这里,关于一个神奇的小工具,让URL地址都变成了“ooooooooo“的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 分享一个比对图片是否一致的小工具(来源: github)

    运行效果图:  官网:  GitHub - codingfishman/image-diff: 一个方便的图片对比工具 一个方便的图片对比工具. Contribute to codingfishman/image-diff development by creating an account on GitHub. https://github.com/codingfishman/image-diff 优缺点: 1.采用比对各色块是否一致是该工具的核心,会出现因角度/光线不同而

    2024年02月04日
    浏览(48)
  • 使用python做了一个pdf转word的小工具

    写在前面:近来工作上一直在处理word excel等文档的处理;于是利用新学的python写了一个小工具  1、其实实现起来很简单,主要是利用了pdf2docx这个库来实现 首先安装导入pdf2docx库  2、代码部分: 话不多说直接上代码:

    2024年02月07日
    浏览(47)
  • 一个基于Excel模板快速生成Excel文档的小工具

    DocumentGenerator是一个Excel快速生成工具,目标以后还能实现Word、pdf等的文件的生成。该程序独立运行,可通过HTTP接口调用其生成接口。 典型使用场景为如下: 使用者编写模板文件 使用者准备模板文件的填充JSON数据内容 使用者通过网络接口调用该程序服务完成模板数据自动

    2024年02月08日
    浏览(40)
  • vue中,给一个URL地址,利用FileSaver.js插件下载文件到本地

    ①首先下载 FileSaver.js 插件    ②在需要的.vue页面引入  在HTML中引入 ③ 如果想保存一个TXT文档本地 结果:   内容:    ④ 如果想保存一个图片 结果:  图片内容:  如果图片不允许跨域则会出现这种情况:   ⑤下面这个方法则可以完美的解决跨域问题,不光可以下载图

    2024年02月06日
    浏览(53)
  • 如何做一个快速粉的小红薯ai绘画号?绘画工具篇

    小狸猫 小程序 新手入门 灵创(原ai画了个画) 小程序 新手入门 魔法画师 小程序 新手入门 无界ai(推荐) 小程序/网页/app 功能丰富,模型更新快,有非常多的模型、风格、参数可以一键调整,推荐使用。 mewxai(推荐) 小程序 功能简单,有非常多的爆款模型,推荐使用。

    2024年02月09日
    浏览(34)
  • 【Android取证篇】渗透测试工具apk2url快速提取APK内的IP和URL地址

    通过渗透测试工具apk2url快速检索APK开发过程中没有删掉的URL地址,来发现一些搜索引擎、子域名查找不到的资源,从而进一步收集信息查找后台等—【蘇小沐】 1、实验环境 系统环境 Windows 11 专业工作站版,[23H2(22631.3085)] Kali linux ,[v2023.4] apk2url,[v1.2] 2、apk2url功能 apk2

    2024年03月14日
    浏览(46)
  • 【浏览器】url参数中的“+”全部变成了空格原因及解决办法

    背景 今天在获取其他站点重定向添加到我cms后台管理的url参数时,碰到参数中的“+”全部变成了空格的情况 原因 是URL中默认的将“+”号转义了 W3C标准规定,当Content-Type为application/x-www-form-urlencoded时,URL中查询参数名和参数值中空格要用加号+替代,所以几乎所有使用该规范

    2024年02月13日
    浏览(40)
  • 我把Github上最牛b的Java教程和实战项目整合成了一个PDF文档

    写在前面 大家都知道 Github 是一个程序员福地,这里有各种厉害的开源框架、软件或者教程。这些东西对于我们学习和进步有着莫大的进步,所以我有了这个将 Github 上非常棒的 Java 开源项目整理下来的想法。觉得不错的话,欢迎小伙伴们去star一波。 很多小伙伴都不知道学习

    2024年02月04日
    浏览(52)
  • 一个含不少免费额度和数据下载的IP地址来源查询工具

    大家好,我是TJ君! 如今在国内运营的各种互联网应用都有接入IP来源显示的要求,现在相关API的供应商也很多。今天TJ刚好看到一个不错的,所以马上给大家推荐一下。 这款不错的产品名称为: IPInfo 该IP查询工具除了传统的提供地址位置之外,还有很多其他能力,具体的这

    2024年02月08日
    浏览(42)
  • 网卡ip地址突然变成169.254.xxx.xxx怎么办?

    电脑连接路由器上不去网,但是手机可以上 ,IP地址变成了169.254.xxx.xxx,现在我分享下自己的解决方法!不一定百分百都能解决 ,基本上百分之80都是这个问题。 1、首先确认 路由器  DHCP 服务已经打卡 路由器地址一般都是 192.168.1.1。当然一般这个情况 故障电脑是进不去路由

    2024年02月08日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包