O Poder das Expressões Regulares - Parte 2

Igor Escobar on Mai 30th 2008

Se você é programador, e ainda recusa ou ignora estudar este sub-mundo da programação, este post é para você!

Este post será para mostrar, CLARAMENTE, como as expressões regulares podem ajudar você a se tornar um desenvolvedor mais produtivo dentro da sua empresa.

Na empresa em que eu trabalho, tive que desenvolver uma função genérica onde ela é capaz de aplicar qualquer tipo de mascara em cima de uma string ( data, hora, cep, cpf, cnpj, telefone etc ).

1º Para que eu pudesse aplicar a mascara em cima de um campo com CPF por exemplo eu tinha que primeiro, retirar as impurezas que o usuário pudesse vir a digitar como acentos, vírgulas, pontos etc.

2º Eu tinha que retirar os zeros a esquerda e depois adicionar os zeros a esquerda corretamente pois o usuário poderia digitar os zeros em excesso e isso tinha que ser tratado ou ignorado pela formatação.

3º Finalmente, aplicamos a mascara.

Vou dar atenção a essa função para retirar os zeros a esquerda, a primeira solução que eu desenvolvi foi essa, funciona, porém, é meio grande:

PLAIN TEXT
  1. function RetiraZerosEsquerda(Numero){
  2.     var Numero = ''+Numero;
  3.  
  4.     var len = Numero.length;
  5.     var numPermitidos = '123456789';
  6.     var Numero2 = '';
  7.     var Cut = true;
  8.     for(var i = 0; i <= len; i++) {
  9.         nNow = Numero.charAt(i);
  10.         if(numPermitidos.indexOf(nNow) != -1) Cut = false;
  11.         if(nNow != 0) { Numero2 += nNow; }
  12.         else if(Cut == false) { Numero2 += nNow; }
  13.     }
  14.     return Numero2;
  15. }

Agora, pensei em aplicar esta mesma solução utilizando expressões regulares, funciona perfeitamente, e veja como ficou:

PLAIN TEXT
  1. function RetiraZerosEsquerda(Numero){
  2.     return Numero.replace(/(0)[^1-9]+/g,"");
  3. }

Interessante não?

Fica ai mais um convite para você que ainda às ignora.

Facilitando o Estudo

Na internet existe várias ferramentas que te ajudam na fixação e treinamento dos conceitos aprendidos neste livro, uma destas, é o Regex Tester online, você escreve um texto simples, escreve a regra e o editor vai colorindo as áreas afetadas por sua expressão regular no seu texto.

Guia de Links Uteis

Expressões Regulares - Aplicando

Nos links acima você encontra informações suficientes para em pouco tempo sair criando suas próprias expressões.

Ah!

Se você se intessou pela função da mascara, divirta-se:

PLAIN TEXT
  1. //
  2.  
  3. /**
  4. * Formata o Campo de acordo com a mascara informada.
  5. * Ex de uso: onkeyup="AplicaMascara('HORA', this);".
  6. * @author Igor Escobar (blog@igorescobar.com)
  7. * @param Mascara String que possui o nome da mascara de formatação do campo.
  8. * @param elemento Campo que será formatado de acordo com a mascara, voce pode informar o id direto ou o próprio elemento usando o this.
  9. * @returns {void}
  10. * @methods
  11.    - DATA:
  12.    - HORA:
  13.    - CEP:
  14.    - CPF:
  15.    - CNPJ
  16.    - TEL
  17.    - TELDDD
  18. */
  19. function AplicaMascara(Mascara, elemento)
  20. {
  21.        
  22.     // Seta o elemento
  23.     var elemento = (elemento) ? elemento : document.getElementById(elemento);
  24.     if(!elemento) return false;
  25.    
  26.     // DEFINE AS REGRAS DE FORMATAÇÃO DOS CAMPOS
  27.     var Regexs = {
  28.         DATA: /(([0-9]){2})(([0-9]){2})(([0-9]){4})/,
  29.         HORA: /(([0-9]{2}))(([0-9]){2})(([0-9]){2})/,
  30.         CEP: /(([0-9]{5}))(([0-9]){3})/,
  31.         CPF: /(([0-9]{3}))(([0-9]){3})(([0-9]){3})(([0-9]{2,5}))/,
  32.         CNPJ: /(([0-9]{2}))(([0-9]){3})(([0-9]){3})(([0-9]){4})(([0-9]){2,6})/,
  33.         TEL: /(([0-9]){4})(([0-9]){4})/,
  34.         TELDDD: /(([0-9]){2})(([0-9]){4})(([0-9]){4})/
  35.     }
  36.        
  37.     MyRegex = eval('Regexs.'+Mascara);
  38.    
  39.     // INSTANCIA A REGRA REGEX PARA FORMATACAO
  40.     getRegexGroups = new RegExp(MyRegex);
  41.    
  42.     // INSTANCIA A REGRA QUE VERIFICA SE O CAMPO POSSUI SOMENTE NÚMEROS
  43.     onlyNumbers = new RegExp(/^([0-9]+)$/);
  44.    
  45.     // ESTE É O CAMPO COM AS IMPURESAS (DIGITADO PELO USUÁRIO FINAL)
  46.     var CampoSujo = elemento.value;
  47.    
  48.     // RETIRA OS EXCESSOS DOS CAMPOS PARA QUE POSSAMOS APLICAR A MASCARA EM UM CAMPO LIMPO
  49.    
  50.     if(Mascara == "CPF" || Mascara == "CNPJ")
  51.         var oValue = RetiraZerosEsquerda(CampoSujo.replace(/([./;:,\-()]+)/g,""));
  52.     else
  53.         var oValue = CampoSujo.replace(/([./;:,\-()]+)/g,"");
  54.        
  55.  
  56.     if(Mascara == "CPF") { oValue = addLeftZeros(""+oValue, 11); }
  57.     if(Mascara == "CNPJ") { oValue = addLeftZeros(""+oValue, 14); }
  58.    
  59.    
  60.     // VERIFICA SE A REGRA QUE ELE SE ESCOLHEU SE APLICA AO TEXTO DIGITADO NO CAMPO
  61.     if(getRegexGroups.test(oValue) == true){
  62.  
  63.         //APLICA A REGRA NO CAMPO E FORMATA
  64.         switch(Mascara){
  65.             case 'DATA': oNewCampo = oValue.replace(getRegexGroups,"$1/$3/$5"); break;
  66.             case 'HORA': oNewCampo = oValue.replace(getRegexGroups,"$1:$3:$5"); break;
  67.             case 'CEP': oNewCampo = oValue.replace(getRegexGroups,"$1$3-$5"); break;
  68.             case 'CPF': oNewCampo = oValue.replace(getRegexGroups,"$1.$3.$5-$7"); break;
  69.             case 'CNPJ': oNewCampo = oValue.replace(getRegexGroups,"$1.$3.$5/$7-$9"); break;
  70.             case 'TEL': oNewCampo = oValue.replace(getRegexGroups,"$1-$3"); break;
  71.             case 'TELDDD': oNewCampo = oValue.replace(getRegexGroups,"($1)$3-$5"); break;
  72.         }
  73.         // Retorna o valor do elemento com seu novo valor
  74.         if(parseInt(oValue) != 0 && parseInt(oValue) != "") elemento.value = oNewCampo; 
  75.        
  76.     }
  77. }

Filed in Expressões Regulares, Utilidades | No responses yet

Trackback URI | Comments RSS

Leave a Reply