Validação e Máscara Decimal usando Expressões Regulares

Expressões Regulares estão presentes no nosso sofware, ainda que não as vejamos, as funções que chamamos acabam passando por filtros RegExp na fase onde o código é transformado para algo mais próximo da linguagem de máquina, seja qual for sua linguagem de programação.

REGEXP… nome estranho, dá medo mesmo. Eu tinha muito medo, e hoje me pergunto porque esperei quatro anos pra parar e realmente entender a razão porque existe e sua utilidade. Um dia eu cansei de enrolar e resolvi pegar realmente. É possível dominar RegExp em uma semana ou menos.

Você fala inglês? Aprendeu por conta ou fez um curso? Assim como você entendeu a necessidade do inglês na programação, também precisa dominar RegExp. Isso vai elevar sua habilidade de programação e tornar seus códigos mais enxutos e eficientes.

Utilizamos Expressões Regulares para encontrar padrões em textos e então poder operar sobre esses padrões encontrados. Podemos encontrar padrões com procuradores gulosos – que examinam da primeira até a última ocorrência do padrão – ou preguiçosos (?) – que dão a análise por encerrada na primeira ocorrência do padrão.

Utilizamos text.match(regex) – método para teste de strings contra um regex, usando os localizadores disponíveis:
. – qualquer caractér naquela posição
? – o caractér anterior é opcional ? – sinaliza um procurador preguiçoso
[abc] – permite apenas um dos caractéres declarados a, b ou c
[^abc] – bloqueia o uso de qualquer um dos três caractéres
[a-z] – demarcam espaço para letras
[0-9](ou \d) – demarcam espaço para númerais
[^0-9](ou \D) – demarcam espaço para não-numerais
\w != \W – Word (Palavra), ou não
\s != \S – espaço, ou não
+ e * – repete o caractér anterior, ou o set de regex uma ou mais vezes
{x} – número exato de repetições
{x,y} – para variar o número de repetições
() – grupos : coletam o texto encontrado pelos padrões definidos dentro de seu campo. Os grupos podem ser referenciados por número de índice posteriormente, $1, $2 …

Um listener de eventos como onChange deve ser usado para aplicar as funções mask_decimal( event.target ) e validate_decimal( event.target ) como veremos a seguir.

Vejamos um exemplo prático em JavaScript (ECMA Script) de máscara e validação para números decimais, ambos usando RegExp. A seguinte função pode ser aplicada no evento onChange de cada campo desejado. É uma função que formata o valor digitado cada vez que ele é modificado.

export function mask_decimal(input){

    if(typeof input === "undefined" || input == null)
    return 0;
  
    let valor = '';
  
    if(typeof input.value !== "undefined"){
      valor = input.value;
    } else {
      valor = input;
    }
  
    if(valor.length <=2)
    return valor;
  
      let v = valor;
       v = v.replace(/\D/g, '');
      v = v.replace(/(\d{1,2})$/, ',$1');
     v = v.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
   return v;
  
  }

v.replace(/(\d{1,2})$/, ‘,$1’);

Explicação: Simples. Identifique a string que termine com dois caractéres ($). Insira uma vírgula logo antes.

/(\d)(?=(\d{3})+(?!\d))/g

Explicação: Retorne pra mim, todas as ocorrências na string fornecida. Quero qualquer ocorrência de um único número, seguido de três números exatamente, sem outros números após. Isso é necessário para pegar as unidades de milhar.

Criamos então a validação. Queremos a precisão de dois números após a vírgula, que é nosso padrão brasileiro. Retorne true se validar. Caso contrário, retorne false.

export function validate_decimal(input){

  if(typeof input == "undefined" || input == null)
  return 0;

  let valor = '';

  if(typeof input.value !== "undefined"){
    valor = input.value;
  } else {
    valor = input;
  }

  if(valor.length <= 2){
    return true;
  }

  var re = /(\d{1,3}\.)*([\d]{2,3}\,)*(\d{2})/;

return re.test(valor);
}

Repare a utilização de .replace na máscara e .test na validação.

Ferramentas web úteis para testes

RegexOne é um site bolado pra você pegar as manhas e entender de vez cada caractér quando ver uma expressão regular da próxima vez. Você também vai passar a escrever suas próprias expressões com tanta facilidade quanto programa sua linguagem.

Teste & debug para PHP, Python e Javascript

Uma segunda opção, também muito boa, com exemplos

Conclusão

Percebemos que existem verificações para saber se o valor está vazio e também percebemos aplicações consecutivas de diferentes padrões RegExp, como vimos nos .replace consecutivos sobre o mesmo valor. O que é retornado, fica visível novamente no campo em questão de milissegundos, criando a validação e a máscara em tempo real.