É comum ter problemas com a codificação em conteúdos HTML e isso faz aparecer às vezes uns caracteres estranhos no meio do texto. Isso acontece normalmente por causa de algum erro nas declarações de Content-type e charset ou na interação entre os diferentes processos que compõe uma página. Podemos construir uma página a partir de dados de uma database que serão processados pelo PHP e talvez até pelo Javascript antes de ser exibido – isso se não estivermos usando Ajax, o que torna a confusão ainda mais completa.
Bem, a codificação em ASCII não causa problemas pois elimina os caracteres acentuados e outras coisas estranhas para "sinais" que utilizam apenas caracteres suportados em qualquer sistema.
O uso de uma função em Javascript para converter textos para ASCII é bastante limitado, pois normalmente quando a página carrega as conversões já aconteceram, mas se o usuário está escrevendo em um TEXTAREA e digita algo acentuado, então nosso script pode ser realmente útil.
O código a seguir acrescenta alguns métodos e propriedades ao objeto String para permitir a conversão de/para ASCII. De quebra, o método Array.searchFor, que foi necessário (e construído com prototype para não quebrar o clima…)
// caracteres ASCII
String.prototype.ASCIIchars = ["¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "€" ];
// caracteres latinos
String.prototype.ISOchars = ["¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "€"];
// decodificar
String.prototype.ASCIIDecode = function() {
var s = this.replace(/&#(\d+);/g, function(str, s1) { return String.fromCharCode(s1); });
for(var i = 0; i < this.ASCIIchars.length; i++)
s = s.replace(new RegExp(this.ASCIIchars[i], "g"), this.ISOchars[i]);
return s;
};
// codificar
String.prototype.ASCIIEncode = function(inc) {
if(inc) {
if(/&|amp/.test(inc)) { this.ISOchars.push("&"); this.ASCIIchars.push("&"); }
if(/tag/.test(inc)) { this.ISOchars.push("<", ">"); this.ASCIIchars.push("<", ">"); }
if(/space/.test(inc)) { this.ISOchars.push(" "); this.ASCIIchars.push(" "); }
if(/quote/.test(inc)) { this.ISOchars.push('"', "'"); this.ASCIIchars.push(""", "'"); }
}
var cooked = "";
for (var i = 0; i < this.length; i++) {
var ind = this.ISOchars.searchFor(this.charAt(i));
if(ind > -1) cooked += this.ASCIIchars[ind];
else cooked += this.charAt(i);
}
return cooked;
};
// busca por um dado valor no array, retornando o
// índice do el. ou -1 caso não haja correspondência
Array.prototype.searchFor = function(str, icompare) {
for(var i = 0; i < this.length; i++) {
if(icompare && (this[i].toLowerCase() == str.toLowerCase())) return i;
else if(this[i] == str) return i;
}
return -1;
};
Repare que os arrays String.ASCIIchars e seu equivalente String.ISOchars não incluem alguns caracteres muito usados, principalmente por interferirem no conteúdo das TAGs, como aspas e os sinais de maior e menor (que abrem e fecham as TAGs), mas o método String.ASCIIEncode oferece um jeito de incluirmos esses caracteres na substituição, o parâmetro inc. A função espera uma string que deve conter um ou mais dos seguintes valores (em qualquer ordem, juntos ou separados, tanto faz):
- "amp" -> troca 0& por &
- "tag" -> troca < por < e > por >
- "space" -> troca o espaço em branco por
- "quote" -> troca as aspas simples e duplas por ' e "e;
Há ainda outros caracteres que podemos precisar incluir ou excluir da substituição e para fazer isso, basta incluir os valores correspondentes nos arrays criados, tomando o cuidado de seguir uma ordem para que os índices sejam equivalentes nos dois arrays. Isso ANTES de chamar os métodos!
Veja alguns exemplos:
(nas linhas 5 e 6, deconsidere os espaçoes entre ‘&’ e ‘lt;’, ‘gt;’ e ‘nbsp;’. Foram necessários para passar pelo Code Highlighter…)
var str = "Maria é bela";
alert(str.ASCIIEncode()); // Maria é bela
var str = "Maria <b>é bela</b>";
alert(str.ASCIIEncode()); // Maria <b> é bela</b>
alert(str.ASCIIEncode("tag")); // Maria & lt;b& gt;é bela& lt;/b& gt;
alert(str.ASCIIEncode("tag space")); // Maria& nbsp;& lt;b& gt;é& nbsp;bela& lt;/b& gt;
Esse sistema usa os valores "amigáveis", as entidades ASCII , onde o caracter "á" é representado por "á" e não por "á" o que também estaria correto. Aliás, para usar apenas os sinais numéricos (baseados na posição do caracter dentro da tabela ASCII), a função seria bem mais simples… O Javascript oferece funções (métodos do objeto String) para executar essa conversão (charAt(), charCodeAt() e fromCharCode()). Veja uma versão usando apenas os valores numéricos (limitado ao intervalo da tabela que contém os caracteres acentuados: 192 – 255):
function ASCIIEncode(s) {
var cooked = "";
for (var i = 0; i < s.length; i++) {
if(s.charCodeAt(i) >= 192 && s.charCodeAt(i) <= 255)
cooked += ""+s.charCodeAt(i)+";";
else cooked += s.charAt(i);
}
return cooked;
}
function ASCIIDecode(s) {
return s.replace(/(\d+);/g, String.fromCharCode(RegExp.$1));
}
Note que nesse exemplo criei funções e não métodos do objeto String, como fiz no código acima. Aqui precisamos enviar a string como parâmetro.
É isso aí. Espero que seja útil.
Pingback: link
Pingback: link
Matéria bem legal, parabéns.
=D
Muuuito bom. Não acretido que fiquei tanto tempo sem ler por aqui por causa de erros no feed hehehe.
Parabéns cau.
Olá amigo, pelo que parece seu script é muito bom, gostaria de saber como faço pra usá-lo junto com outro script, por exemplo, um script de busca em javascript pra usá-lo juntamente com um textbox antes de chamar pela função no form básico.
Um abraço!
Excelente!
quebrei a acabeça com php pra isto,
To usando o fck Editor e o bando de Dados em utf8, ai se eu digitava “é”, no banco ficava “&aecute”,
pra resolver copiei seu array e usei o foreach, com str_replace, depois foi so tacar utf8_encode que ficouu 100%….
Flows…