記錄--讓URL地址都變成了"ooooooooo"

来源:https://www.cnblogs.com/smileZAZ/archive/2023/06/02/17452629.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 發現一個很有創意的小工具網站,如封面圖所示功能很簡單,就是將一個URL地址轉換為都是 ooooooooo 的樣子,通過轉換後的地址訪問可以轉換回到原始地址,簡單流程如下圖所示。轉換的邏輯有點像短鏈平臺一樣,只不過這個是將你的URL地址變的 ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

發現一個很有創意的小工具網站,如封面圖所示功能很簡單,就是將一個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) 

到此就核心實現代碼就分享結束了,看完是不是感覺並沒有很複雜,基於此設計或許可以延伸出其他的字元效果,有興趣的也可以試試看。將轉碼後的地址分享給你的朋友們一定會帶來不一樣的驚喜。

下麵是我轉換的一個AI小工具地址,點擊看看效果吧~

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

本文轉載於:

https://juejin.cn/post/7225573912670191677

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 摘要:一起看一下GaussDB(for MySQL)是如何對執行計划進行緩存並加速Prepared Statement性能的。 本文分享自華為雲社區《執行計劃緩存,Prepared Statement性能躍升的秘密》,作者: GaussDB 資料庫。 引言 在資料庫系統中,SQL(Structure ...
  • 摘要:通過2個實例場景講解GaussDB(DWS)運維解決方案。 本文分享自華為雲社區《GaussDB(DWS)運維 -- 基表統計信息估算不准的常見場景及處理方案》,作者:譡里個檔。 場景1:基表過濾欄位存在的隱式類型時,基表行數估算偏小 這種場景絕大部分場景DWS能夠處理,但是如果隱式類型轉後的 ...
  • 作文類的資料庫雖然已經有很多,有近萬條的,也有2萬條的,但今天弄到了小學、中學、高中一個系列的數據,而且最主要的是數據的記錄數很多。這份高中作文包含46169條記錄,分類也很好。 grade欄位統計:高一(14062)、高二(13375)、高三(17381)、高考(1351)。 type欄位統計:散 ...
  • # 前言 從今天開始, 就帶各位小伙伴學習資料庫技術。**資料庫技術是Java開發中必不可少的一部分知識內容。也是非常重要的技術。本系列教程由淺入深, 全面講解資料庫體系。 非常適合零基礎的小伙伴來學習。** *** 全文大約【**1567】** 字,不說廢話,只講可以讓你學到技術、明白原理的純乾貨 ...
  • 這個資料庫中不但包含了常規的朝代、作者、教材分類之外,還有詩集和分類欄位。 詩集檢索可以讓用戶選擇喜歡的詩集開始誦讀。類型檢索是指按詩歌的題材檢索,如果你在寫作時想引用詩句,類型檢索會效率很多。 朝代有:先秦、兩漢、魏晉、南北朝、隋代、唐代、五代、宋代、金朝、元代、明代、清代; 出處有:唐詩三百首、 ...
  • **【導讀】** 在PC 互聯網到移動互聯網的演進過程,隨著人們對交互和信息獲取的智能化要求越來越高,移動終端上的應用生態發展到今天也面臨著變革。傳統厚重的App,功能齊全,但開發成本高、周期長,且存在搜索、安裝、卸載等一系列需要用戶主動關註的顯性操作,這些顯性操作給用戶帶來了實質性的使用成本。輕量 ...
  • 這段時間破解了中高學生知識題庫,包含高中英語題庫、小學英語題庫、初中地理題庫、初中歷史題庫、高中歷史題庫、初中生物題庫,數據表結構都一樣,今天發的這份是上萬條的初中歷史題庫,截圖包含所有欄位,截圖下方有顯示共有記錄數。 參考項有:步入近代(1484)、國家的產生和社會的變革(1261)、侵略與反抗( ...
  • ## strings.xml匹配替換 將兩個Android項目中的多語言字元串文件(strings.xml)進行比較,如果其中一個項目中包含另一個項目沒有的字元,則合併到單一的輸出文件,並以 key 在原始 XML 文件中更新 value 值。如果key匹配不准確則忽略它。 具體來說: 1. 引入 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...