Como eu já havia dito antes, o UTF-8 usa uma codificação de tamanho variável, onde cada caractere pode ocupar entre 1 e 4 bytes, para que isso seja possível, existem bits que são usados para verificar isso, vamos ver o primeiro caso:
Eu falei para vocês anteriormente que para os valores ASCII padrão o UTF-8 mantém a compatibilidade, ou seja, não existe nenhum transformação para os caracteres entre 0 e 127, se você olhar o binário disso, vai perceber que isso varia entre:
00000000
01111111
É importante notar que o primeiro bit do byte não é modificado, isso é importante porque ele é flag que indica se vamos precisar de mais bytes no caractere, então, a partir do valor 128 temos que utilizar algum tipo de transformação.
Antes de proseguirmos com os detalhes vamos iniciar nosso script, comecem ele da seguinte forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Conversor de UTF-8</title>
<script type="text/javascript" charset="utf-8">
get = function(id) {
return document.getElementById(id);
};
UTF8 = {
encode: function(content) {
return content;
},
decode: function(content) {
return content;
}
}
encodeFromTo = function(source, destiny, method) {
var value = get(source).value;
get(destiny).value = method(value);
};
window.onload = function() {
get('encode_button').onclick = function() {
encodeFromTo('original_area', 'encoded_area', UTF8.encode);
};
get('decode_button').onclick = function() {
encodeFromTo('encoded_area', 'original_area', UTF8.decode);
};
};
</script>
<style type="text/css" media="screen">
textarea {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<textarea id="original_area"></textarea><br />
<button type="button" id="encode_button">Codificar para UTF-8</button>
<button type="button" id="decode_button">Decodificar de UTF-8</button><br />
<textarea id="encoded_area"></textarea>
</body>
</html>
Esse é um simples script que por hora não faz nada :P
Mas ele pega o valor do campo de cima e mostra esse valor codificado no campo de baixo, assim como pega o campo de baixo e joga decoficidado no campo de cima. A partir de agora só iremos trabalhar nos métodos encode e decode do objeto UTF8 que criamos acima.
Voltando ao UTF-8, vamos criar primeiro o codificador, então vamos continuar o entendimento dos bytes.
A partir do momento que o primeiro bit deveria ser usado, então a coisa muda, imaginando um caso simples, o caractere de numero 128, se continuassemos usando a maneira simples de somar bits teriamos a seguinte sequencia de bits:
10000000Mas para o UTF-8 a sequencia correta seria:
11000010 10000000Parece complicado, mas não é para tanto, quando passamos dos 128 caracteres iniciais temos alguns "moldes" onde devemos encaixar nossos bits, que no caso são os seguintes (por uso de bytes):
1 byte - 0xxxxxxx
2 bytes - 110xxxxx 10xxxxxx
3 bytes - 1110xxxx 10xxxxxx 10xxxxxx
4 bytes - 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
Esses moldes não são ao acaso, e como pode-se ver eles seguem um padrão, esses moldes são importantes para que o precesso de decodificação, notem que a partir dos primeiros bits do primeiro byte é possivel saber exatamente quantos bytes tem o caractere atual.
Para criamos o processo de encoding, o primeiro passo é descobrir quantos bytes serão nescessários para criar nosso caractere no formato UTF-8, para saber isso é só contar os limites a partir do número de bits que podem ser alocados em cada nível. Mas como eu sou muito legal eu já vou disponibilar esses números para você, e são eles: 128, 2048, 65536
Pra quem nunca executou operações bit a bit pode parecer um pouco complicado sair mexendo eles por ai, mas é facil, primeiro mantenha a calculadora do windows aberta (em modo científico, assim você pode converter entre decimal, hexadecimal e binario sempre que precisar, e você vai precisar), então vamos criar a função de encode:
var encoded = ''; //iniciamos com uma string vazia
for (var i = 0; i < content.length; i++) { //iniciando uma iteracao sobre cada caractere da string
var c = content.charCodeAt(i); //pegando o codigo do caractere na posicao atual
//verificando numero de bytes
if (c < 128) { //1 byte
encoded += String.fromCharCode(c); //simplesmente recolocamos o caractere sem modificações
} else if (c < 2048) { //2 bytes
encoded += String.fromCharCode((c >> 6) | 0xC0); //primeiro caractere
encoded += String.fromCharCode((c & 0x3F) | 0x80); //segundo caractere
} else if (c < 65536) { //3 bytes
encoded += String.fromCharCode((c >> 12) | 0xE0); //primeiro caractere
encoded += String.fromCharCode(((c >> 6) & 0x3F) | 0x80); //segundo caractere
encoded += String.fromCharCode((c & 0x3F) | 0x80); //terceiro caractere
} else { //4 bytes
encoded += String.fromCharCode((c >> 18) | 0xF0); //primeiro caractere
encoded += String.fromCharCode(((c >> 12) & 0x3F) | 0x80); //segundo caractere
encoded += String.fromCharCode(((c >> 6) & 0x3F) | 0x80); //terceiro caractere
encoded += String.fromCharCode((c & 0x3F) | 0x80); //quarto caractere
}
}
return encoded;
Pra quem não está acostumado com manipulação de bits isso pode parecer coisa de louco, mas é simples, vou ilustrar como funcionam os operadores bit a bit utilizados nas operações:
right shift (>>): esse operador simplesmente move bits a direita, caso o bit ultrapasse o primeiro ele é descartado, exemplos:
00011000 >> 2
resulta em: 00000110
01101110 >> 3
resulta em: 00001101
ou seja, eh simplesmente mover bits a direita (se lembre, tudo isso é forma de representação, tudo são bits, desde numeros a caracteres, vc não vai digitar em formato binário nunca, pelo menos não em javascript)
E binário (&): executa uma operação E entre binários, a idéia é simples, você coloca os bits que são comparados em uma listagem de 1 para 1, caso o valor seja 1 nos 2, o resultádo será 1, caso contrário será 0, exemplos:
00110111
& 01100010
----------
00100010
01111000
& 00111110
----------
00111000
esse operador é muito usado para mascarar bits, por exemplo, você quer apenas os 4 últimos bits de um dado binário, então você opera um E contendo 00001111 sobre esse binário, dessa forma você terá o resultado com os 4 últimos valores.
OU binário (|): esse é parecido com o anterior, mas com uma diferença básica, esse retorn 1 exceto se os 2 operadores forem 0, exemplo:
00110101
| 11100001
----------
11110101
Isso são alguns operadores binários, caso não tenha ficado muito claro podem tirar suas dúvidas comigo por comentários ou e-mail.
Dever de casa: pegue os números utilizados no algoritmo anterior em formato hexadecimal (que comecam com 0x) e veja suas formas em binário (use a calculadora do windows ou similar), e va executando o algoritmo como se fosse o computador, dessa forma você terá um melhor entendimento do algoritmo.
O encode está pronto, agora precisamos pegar os códigos Unicode a partir disso que geramos, então vamos criar o decode:
var decoded = ''; //string vazia
var i = 0; //iterador
var n = c1 = c2 = c3 = c4 = 0; //buffers
while (i < content.length) {
c1 = content.charCodeAt(i);
if (c1 < 128) { //1 byte
decoded += String.fromCharCode(c1); //sem conversão, padrão ASCII
i++; //proximo byte
} else if (!(c1 & 0x20)) { //2 bytes
c2 = content.charCodeAt(i + 1);
decoded += String.fromCharCode(((c1 & 0x1F) << 6) | (c2 & 0x3F));
i += 2; //pular 2 bytes
} else if (!(c1 & 0x10)) { //3 bytes
c2 = content.charCodeAt(i + 1);
c3 = content.charCodeAt(i + 2);
decoded += String.fromCharCode(((c1 & 0xF) << 12) | ((c2 & 0x3F) << 6) | (c3 & 0x3F));
i += 3; //pular 3 bytes
} else if (!(c1 & 0x8)) { //4 bytes
c2 = content.charCodeAt(i + 1);
c3 = content.charCodeAt(i + 2);
c4 = content.charCodeAt(i + 3);
decoded += String.fromCharCode(((c1 & 0x7) << 18) | ((c2 & 0x3F) << 12) | ((c3 & 0x3F) << 6) | (c4 & 0x3F));
i += 4; //pular 4 bytes
}
}
return decoded;
O processo inverso é exatamente a mesma coisa, é só pegar os bits que você jogou no formato e junta-los novamente. Para descobrir quantos bytes são usados eu utilizei a seguinte idéia:
1 - se for menor que 128, então é padrão ASCII, jogar direto
2 - verificar bit zero dentro do primeiro byte, a partir disso é possível descobrir o número (se baseando nos formatos possíveis).
O único operador novo é o left shift (<<) que simplesmente move os bits para esquerda ;)
Bom galera, termino por aqui, qualquer dúvida entrem em contato comigo por e-mail ou comentários.
Mudarei de assunto no próximo post (assunto indefinido até o momento ;).
See yah!
