A magical little tool that turns URL addresses into "ooooooooo"

I found a very creative gadget website. As shown in the cover picture, its function is very simple. It converts a URL address into ooooooooo. You can convert it back to the original address by accessing the converted address. The simple process is shown in the figure below. The conversion logic is a bit like the short link platform, except that this one makes your URL address very long, but it looks like ooooooooo. I was curious about how it was implemented, so I checked the source code. This article interprets its core implementation logic, which is very interesting and clever to implement this function.

Prerequisites

Before we start, let's first learn some knowledge points. Because it involves the conversion between two addresses, which is actually the conversion between strings, some encoding and decoding capabilities will be used.

"Convert characters to utf8 array". Each character after conversion has a specific unique value. For example, the utf8 format array after http conversion is [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; }

The above is encoding, and the corresponding one below is decoding, "converting utf8 array to string", for example [99, 111, 109] The converted utf8 format array is 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; }

"Represent a Number object as a string in base 4." toString is used more frequently, but there are fewer scenarios where parameters are passed in. The radix parameter is an optional parameter used to specify the base number to be converted, ranging from 2 to 36. If this parameter is not passed in, the decimal base is used by default.

 n.toString(4)

"Pad the specified characters on the left side of the string until the string reaches the specified length." The basic syntax is str.padStart(targetLength [, padString]).

• targetLength: Required. Specifies the minimum length of the expected string. If the current string is shorter than this length, padString will be used to pad it on the left until the string reaches the specified length.
• padString: Optional. Specifies the character used to fill the string. The default value is " " (space).

 str.padStart(4, '0')

URL encoding/decoding

Now we will start the URL encoding logic. The core logic is as follows:

• Convert to utf8 array
• Convert to base 4 and fill in 0 to 4 digits on the left
• Split into string array
• Maps to different forms of o
• Concatenate into a string again, which is the URL after the conversion.

 // 获取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("")

There are two key points to explain above. First, what does it mean to map to different forms of o? In fact, the converted o is not one "o", but 4 kinds, but the effect we see with the naked eye is very similar, which can be seen by the characters converted by encodeURI.

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

This actually explains why the above code converts to 4-digit system and pads the left side with 0 to 4 digits. Because the above code defines this.enc as follows, there are only four types of "o" in total, and 4-digit system will only produce 0, 1, 2, and 3, so the converted utf8 characters can be matched one by one to these special "o".

 enc = ["o", "ο", "о", "ᴏ"]

The final effect is an example of converting the http character:

• Convert to utf8 array: [104, 116, 116, 112]
• Convert to base 4 and add 0 to 4 digits on the left: ['1220', '1310', '1310', '1300']
• Split and convert to string array: ['1', '2', '2', '0', '1', '3', '1', '0', '1', '3', '1', '0', '1', '3', '1', '0', '1', '3', '0', '0']
• maps to different forms of o: [ 'ο', 'о', 'о', 'o', 'ο', 'ᴏ', 'ο', 'o', 'ο', 'ᴏ', 'ο', 'o', 'ο', 'ᴏ', 'ο', 'o', 'ο', 'ᴏ', 'o', 'o' ]
• Concatenate them into a string again, which is the URL after the conversion: οооoοᴏοoοᴏοoοοᴏooo

The whole conversion process is over. Do you think the design is very good after reading it? After encoding, it is decoding. Decoding is to reverse the above process and restore it to the original URL address. One thing to note here is that parseInt parses 4 characters each time in 4-base mode.

 // 获取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)

at last

This is the end of sharing the core implementation code. After reading it, you may feel that it is not very complicated. Based on this design, other character effects may be extended. If you are interested, you can try it. Sharing the transcoded address with your friends will definitely bring different surprises. The following is an AI gadget address I converted. Click to see the effect~

Official website address: "ooooooooooooooooooooooooo.ooo"

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