Preliminary Knowledge

The first step involves converting characters into a UTF-8 array, where each character is assigned a unique value. For instance, the UTF-8 representation of "http" is [104, 116, 116, 112]. The following JavaScript function illustrates how this conversion occurs:

CopytoUTF8Array(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 code above handles the encoding process, while the decoding counterpart transforms the UTF-8 array back into a string. For example, the array [99, 111, 109] is decoded back to "com."

CopyUtf8ArrayToStr(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:

out += String.fromCharCode(c);

break;

case 12: case 13:

char2 = array[i++];

out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));

break;

case 14:

char2 = array[i++];

char3 = array[i++];

out += String.fromCharCode(((c & 0x0F) << 12) |

((char2 & 0x3F) << 6) |

((char3 & 0x3F) << 0));

break;

}

}

return out;

}

Number Handling and URL Encoding

The Number object can be expressed as a string using the toString method, which often omits parameters. The radix parameter, which dictates the base for conversion, ranges from 2 to 36 and defaults to decimal when unspecified. For example:

n.toString(4)

This will convert the number to its base-4 equivalent. The padStart method is used to ensure the string reaches the desired length by padding it with specified characters.

str.padStart(4, '0')

URL encoding and decoding utilize a specific logic that includes converting to a UTF-8 array, transforming it into base-4, padding with zeros, splitting into a string array, mapping to various "o" forms, and finally stitching the pieces back together to create the encoded URL.

let unversioned = this.toUTF8Array(url)

.map(n => n.toString(4).padStart(4, "0"))

.join("").split("")

.map(x => this.enc[parseInt(x)])

.join("");

In the above code, the mapping to different forms of "o" utilizes an array of variations:

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

Thus, when encoding characters like "http," the transformation occurs as follows:

1. Convert to a UTF-8 array: [104, 116, 116, 112]
2. Convert to base-4 with padding: ['1220', '1310', '1310', '1300']
3. Split into string array: ['1', '2', '2', '0', '1', '3', '1', '0', '1', '3', '1', '0', '1', '3', '0', '0']
4. Map to different "o" forms: ['ο', 'о', 'о', 'o', 'ο', 'ᴏ', 'ο', 'o', 'ο', 'ο', 'ο', 'ο', 'ο', 'ο', 'ο', 'ο']
5. Concatenate to form the final URL: οооoοᴏοoοᴏοoοᴏoo

This comprehensive process illustrates the clever design involved in the encoding scheme.

Decoding Process

The decoding procedure reverses the encoding steps to retrieve the original URL. It is crucial to parse four characters at a time and interpret them in base-4.

let b4str = ooo.split("").map(x => this.dec[x]).join("");

let utf8arr = [];

for (let i = 0; i < b4str.length; i += 4) {

utf8arr.push(parseInt(b4str.substring(i, i + 4), 4));

}

return this.Utf8ArrayToStr(utf8arr);

Final Thoughts

Now that you've explored this tool and its encoding mechanisms, don't you find the design quite impressive? I appreciate your time in reading this and look forward to sharing more insightful content with you.

For further insights, visit PlainEnglish.io, and consider signing up for our free weekly newsletter. Stay connected with us on Twitter, LinkedIn, YouTube, and Discord.