天天百事通！記錄--讓URL地址都變成了"ooooooooo"                        
                                      
                        
                							
                            發(fā)布時間：2023-06-03 01:11:25					
                            文章來源：博客園
                      
                

                        
                
                        	這里給大家分享我在網(wǎng)上總結(jié)出來的一些知識，希望對大家有所幫助發(fā)現(xiàn)一個很有創(chuàng)意的小工具網(wǎng)站，如封面圖所                        
                

						
						
                
           					 
                這里給大家分享我在網(wǎng)上總結(jié)出來的一些知識，希望對大家有所幫助
                發(fā)現(xiàn)一個很有創(chuàng)意的小工具網(wǎng)站，如封面圖所示功能很簡單，就是將一個URL地址轉(zhuǎn)換為都是 ooooooooo的樣子，通過轉(zhuǎn)換后的地址訪問可以轉(zhuǎn)換回到原始地址，簡單流程如下圖所示。轉(zhuǎn)換的邏輯有點(diǎn)像短鏈平臺一樣，只不過這個是將你的URL地址變的很長長長長，但是看著都是 ooooooooo，很好奇是如何實(shí)現(xiàn)的，所以查閱了源碼，本文解讀其核心實(shí)現(xiàn)邏輯，很有趣且巧妙的實(shí)現(xiàn)了這個功能。
                前置知識點(diǎn)
                在正式開始前，先了解一些需要學(xué)習(xí)的知識點(diǎn)。因?yàn)樯婕暗絻蓚€地址其實(shí)也就是字符串之間的轉(zhuǎn)換，會用到一些編碼和解碼的能力。

                (資料圖片)
                將字符轉(zhuǎn)為utf8數(shù)組，轉(zhuǎn)換后的每個字符都有一個特定的唯一數(shù)值，比如 http轉(zhuǎn)換后的 utf8 格式數(shù)組即是 [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;    }
                上面是編碼，對應(yīng)下面的則是解碼，將utf8數(shù)組轉(zhuǎn)換為字符串，比如[99, 111, 109]轉(zhuǎn)換后的 utf8 格式數(shù)組即是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 進(jìn)制的形式表示為字符串，toString 用的比較多，但是里面?zhèn)魅雲(yún)?shù)的場景比較少，這個參數(shù) radix 是一個可選的參數(shù)，用于指定轉(zhuǎn)換的進(jìn)制數(shù)，范圍為 2 ~ 36，如果未傳入該參數(shù)，則默認(rèn)使用 10 進(jìn)制。
                n.toString(4)
                在字符串左側(cè)填充指定字符，直到字符串達(dá)到指定長度。基本語法為 str.padStart(targetLength [, padString])。
                • targetLength：必需，指定期望字符串的最小長度，如果當(dāng)前字符串小于這個長度，則會在左側(cè)使用 padString 進(jìn)行填充，直到字符串達(dá)到指定長度。
                • padString：可選，指定用于填充字符串的字符，默認(rèn)為 " "（空格）。
                str.padStart(4, "0")
                URL 編碼/解碼
                下面正式開始URL編碼的邏輯，核心的邏輯如下：
                • 轉(zhuǎn)換為utf8數(shù)組
                • 轉(zhuǎn)換為4進(jìn)制并左側(cè)補(bǔ)0到4位數(shù)
                • 分割轉(zhuǎn)換為字符串?dāng)?shù)組
                • 映射到o的不同形式
                • 再次拼接為字符串，即轉(zhuǎn)換完成后的URL
                // 獲取utf8數(shù)組let unversioned = this.toUTF8Array(url)    // 轉(zhuǎn)換為base 4字符串    // padstart非常重要！否則會丟失前導(dǎo)0    .map(n => n.toString(4).padStart(4, "0"))    // 轉(zhuǎn)換為字符數(shù)組    .join("").split("")    // 映射到o的不同形式    .map(x => this.enc[parseInt(x)])    // 連接成單個字符串    .join("")
                上面有兩個關(guān)鍵點(diǎn)解釋一下，首先映射到o的不同形式這個是什么意思呢？其實(shí)轉(zhuǎn)換后的o并不是一種“o”，而是4種，只不過我們?nèi)庋劭吹降男Ч芟瘢ㄟ^encodeURI轉(zhuǎn)換后的字符可以看出來。
                encodeURI("o-ο-о-?")// o-%CE%BF-%D0%BE-%E1%B4%8F
                這里其實(shí)也解釋了為什么上面為什么是轉(zhuǎn)換為4進(jìn)制和左側(cè)補(bǔ)0到四位數(shù)。因?yàn)樯厦娲a定義的this.enc如下，因?yàn)榭偣仓挥兴姆N“o”，4進(jìn)制只會產(chǎn)生0，1，2，3，這樣就可以將轉(zhuǎn)換后的utf8字符一一對應(yīng)上這幾種特殊的“o”。
                enc = ["o", "ο", "о", "?"] 
                最后的效果舉例轉(zhuǎn)換 http這個字符：
                • 轉(zhuǎn)換為utf8數(shù)組：[ 104, 116, 116, 112 ]
                • 轉(zhuǎn)換為4進(jìn)制并左側(cè)補(bǔ)0到4位數(shù)：["1220", "1310", "1310", "1300"]
                • 分割轉(zhuǎn)換為字符串?dāng)?shù)組：["1", "2", "2", "0", "1", "3", "1", "0", "1", "3", "1", "0", "1", "3", "0", "0"]
                • 映射到o的不同形式：[ "ο", "о", "о", "o", "ο", "?", "ο", "o", "ο", "?", "ο", "o", "ο", "?", "o", "o" ] 
                • 再次拼接為字符串，即轉(zhuǎn)換完成后的URL：οооoο?οoο?οoο?oo
                到此整個轉(zhuǎn)換編碼的過程就結(jié)束了，看完后是不是覺得設(shè)計的很不錯，編碼完后就是解碼，解碼就是將上面的過程倒序來一遍，恢復(fù)到最原始的URL地址。這里要注意一點(diǎn)的是每次解析4個字符且parseInt以4進(jìn)制的方式進(jìn)行解析。
                // 獲取url的base 4字符串表示let b4str = ooo.split("").map(x => this.dec[x]).join("")let utf8arr = []// 每次解析4個字符// 記住添加前導(dǎo)0的填充for (let i = 0; i < b4str.length; i += 4)    utf8arr.push(parseInt(b4str.substring(i, i + 4), 4))// 返回解碼后的字符串return this.Utf8ArrayToStr(utf8arr) 
                到此就核心實(shí)現(xiàn)代碼就分享結(jié)束了，看完是不是感覺并沒有很復(fù)雜，基于此設(shè)計或許可以延伸出其他的字符效果，有興趣的也可以試試看。將轉(zhuǎn)碼后的地址分享給你的朋友們一定會帶來不一樣的驚喜。
                下面是我轉(zhuǎn)換的一個AI小工具地址，點(diǎn)擊看看效果吧~
                ooooooooooooooooooooooo.ooo/ooooοооoο?ο…
                本文轉(zhuǎn)載于:
                https://juejin.cn/post/7225573912670191677
                如果對您有所幫助，歡迎您點(diǎn)個關(guān)注，我會定時更新技術(shù)文檔，大家一起討論學(xué)習(xí)，一起進(jìn)步。
                							 							 
							
                標(biāo)簽：
							 
							
                
							
                       	
                
                    
                
       
        
                
            
                資訊播報
                
            
        
                
    
                

    
                    

				
                
                    
                
                        
                        
                    
                
                
                
				        
		
                        
                
        
                
        
                
            
                樂活HOT
                
            
        
                
        
                
            
                娛樂LOVE
                
            
        
                
		
		
        
                
            
                精彩推送
                
            
        
                
   
    
                
 

    
                
    

                



亚洲午夜福利在线视频|
午夜亚洲AV日韩AV无码大全|
亚洲综合丁香婷婷六月香|
亚洲乱码一区二区三区在线观看|
亚洲最大的黄色网|
亚洲国产高清在线精品一区|
亚洲AV区无码字幕中文色|
浮力影院亚洲国产第一页|
亚洲日韩中文字幕一区|
亚洲偷自拍另类图片二区|
亚洲三级电影网站|
91大神亚洲影视在线|
亚洲韩国在线一卡二卡|
亚洲综合久久成人69|
亚洲人成网站在线播放影院在线
|
亚洲乱码av中文一区二区|
亚洲性无码一区二区三区|
中文日韩亚洲欧美制服|
国产精品高清视亚洲精品|
亚洲娇小性色xxxx|
亚洲三级在线播放|
2017亚洲男人天堂一|
亚洲人成网站18禁止|
亚洲AV永久无码精品网站在线观看|
亚洲人成77777在线播放网站不卡|
久久亚洲国产成人影院|
亚洲熟妇av午夜无码不卡|
亚洲精品无码你懂的|
亚洲s码欧洲m码吹潮|
国产福利电影一区二区三区，亚洲国模精品一区
|
亚洲日韩AV一区二区三区中文|
中国china体内裑精亚洲日本|
2020亚洲男人天堂精品|
亚洲日韩一中文字暮|
亚洲av综合日韩|
亚洲精品国产精品国自产观看
|
亚洲日本一区二区三区在线|
日韩va亚洲va欧洲va国产|
亚洲视频中文字幕|
亚洲一区二区三区免费视频|
亚洲色成人WWW永久在线观看|