Converter para ASCII com Javascript

É 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("&amp;"); }
        if(/tag/.test(inc))   { this.ISOchars.push("<", ">"); this.ASCIIchars.push("&lt;", "&gt;"); }
        if(/space/.test(inc)) { this.ISOchars.push(" ");      this.ASCIIchars.push("&nbsp;"); }
        if(/quote/.test(inc)) { this.ISOchars.push('"', "'"); this.ASCIIchars.push("&quot;", "&apos;"); }
      }
    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 &amp;
  • "tag" -> troca < por &lt; e > por &gt;
  • "space" -> troca o espaço em branco por &nbsp;
  • "quote" -> troca as aspas simples e duplas por &apos; e &quote;

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 "&aacute;" e não por "&#225;" 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.

6 ideias sobre “Converter para ASCII com Javascript

  1. Pingback: link

  2. Pingback: link

  3. 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!

  4. 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…

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>