Criando máscara monetária com expressões regulares

As expressões regulares podem nos auxiliar de várias formas, uma delas é criando uma máscara monetária para os usuários terem um campo mais intuitivo na hora de inserir dados. Além de faciliar o entendimento do campo, ela nos ajuda a evitar a inserção de caracteres indesejáveis por parte do usuário. Nesse artigo nós vamos juntos, utilizando as expressões regulares, criar uma função que fará todo esse processo para nós.

O que são as expressões regulares

Expressões regulares são padrões de pesquisa que possibilitam a localização e manipulação de texto com base em regras específicas. Elas se tornam uma ferramenta essencial para a análise de strings, validação de entradas e substituição de partes específicas do texto. Usando metacaracteres como o . (ponto) para representar qualquer caractere e quantificadores como o * (asterisco) para indicar “zero ou mais ocorrências”, é possível criar padrões complexos para realizar tarefas como encontrar palavras-chave em um texto ou validar formatos de dados, como endereços de e-mail.

Além disso, elas podem ser utilizadas para extrair informações de documentos, realizar operações de substituição em massa e garantir a integridade dos dados de entrada. A compreensão e aplicação eficaz das expressões regulares são habilidades valiosas para desenvolvedores, permitindo-lhes lidar com desafios relacionados a manipulação de texto de forma precisa e automatizada, economizando tempo e esforço na programação.

Iniciando a máscara monetária

A princípio, a máscara que iremos criar irá consistir na criação de uma função, essa função será inserida na própria tag HTML através do evento onkeyup. Esse evento executa a função toda vez que o usuário soltar a tecla digitada. O elemento completo no HTML ficará assim:

<input type="text" name="valor" id="valor" onkeyup="mascara(this)">

Nesse contexto, a palavra-chave this faz referência ao elemento HTML que está acionando o evento onkeyup, no caso, o próprio input.

Isso é útil pois, permite que a função mascara acesse e manipule diretamente o campo de entrada de texto no qual o usuário está digitando, sem a necessidade de selecioná-lo por meio do DOM (Modelo de Objeto de Documento) em JavaScript. Portanto, o this é uma maneira conveniente de referenciar o elemento HTML atual dentro do contexto do evento, facilitando a interação com ele no código JavaScript.

Curso JavaScript - Manipulação de elementos HTML no DOM

Conhecer o curso

Lógica da máscara

Com a parte do HTML pronta, vamos a nossa função. A função mascara terá um único parâmetro, que será o prórpio elemento, bem como vimos anteriormente. Nos parâmetros podemos dar o nome que quisermos, vou dar o nome de valor, então nossa função ficará assim:

function mascara(valor) {}

Primeiramente vamos capturar o valor que for inserido dentro do input, como temos acesso ao elemento através do parâmetro fica fácil capturar esse valor. Vamos atribuir o valor inserido dentro de uma variável para facilitar a manipulação futuramente. Fazemos isso através da propriedade .value, dessa forma:

function mascara(valor) {
	var valorAlterado = valor.value;
}

A partir de agora, tudo que for digitado pelo usuário nesse elemento, ficará contido dentro da variável valorAlterado. Primeiramente, vamos evitar, usando as expressões regulares, que o usuário insira valores não numéricos nesse campo. Fazemos isso utilizando o método replace() do JavaScript.

function mascara(valor) {
	var valorAlterado = valor.value;
	valorAlterado = valorAlterado.replace(/\D/g, ""); // Remove tudo que não for número
}

Vamos pegar esse valorAlterado, que é os caracteres adicionados no input e remover tudo que não for número. O primeiro parâmetro do método é a expressão regular /\D/g. O \D é um metacaractere que representa “não dígito”. Em uma expressão regular, ele corresponde a qualquer caractere que não seja um dígito numérico, ou seja, corresponde a letras, símbolos, espaços em branco e outros caracteres não numéricos. O g é uma flag (sinalizador) que significa “global”. Quando usada com uma expressão regular, ela faz com que a correspondência ocorra em todo o texto, em vez de parar após a primeira correspondência encontrada.

Já o segundo parâmetro é o que queremos colocar no lugar desses caracteres não numéricos que encontrarmos, no caso, vamos apenas remover.

Adicionando ponto e vírgula nos valores inseridos

Da mesma forma que fizemos para remover caracteres que não forem números, podemos fazer para adicionar a vírgula para dar a ideia de centavos e o ponto para separar o milhar da centena.

Lógica dos centavos (adicionando a vírgula)

Primeiramente, vamos iniciar com os centavos, lembrando que os centavos é uma vírgula e dois caracteres, dessa forma: ,99. Fazemos isso com utilizando o replace junto da expressão regular:

valorAlterado = valorAlterado.replace(/(\d+)(\d{2})$/, "$1,$2");

O (\d+) corresponde a um ou mais dígitos (0-9) na sequência. O + significa que estamos procurando um ou mais dígitos em sequência e colocando esses dígitos em um grupo de captura, representado por ( e ). Esse grupo de captura será referenciado como $1 na parte de substituição. O (\d{2}) corresponde a exatamente dois dígitos. Eles também são colocados em um grupo de captura, que será referenciado como $2 na parte de substituição. $1,$2 é a parte de substituição. $1 é substituído pelos dígitos capturados no primeiro grupo de captura (um ou mais dígitos) e $2 é substituído pelos dígitos capturados no segundo grupo de captura (dois dígitos). Em síntese, a expressão está adicionando uma vírgula antes os dois últimos dígitos, transformando algo como 12345 em 123,45.

Curso RegEx - Expressões Regulares

Conhecer o curso

Lógica da centena/milhar (adicionando ponto)

Agora vamos adicionar um . (ponto) a cada três caracteres após a vírgula. Isso irá representar as centenas e milhar. Fazemos isso com a seguinte declaração:

valorAlterado = valorAlterado.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");

O (?=(\d{3})+(?!\d)) é chamado de “lookahead positivo” e é usado para verificar se existem grupos de três dígitos consecutivos antes do dígito atual, sem realmente consumir esses dígitos. Isso significa que a expressão regular verifica se há dígitos agrupados de três em três antes do dígito atual, sem incluir esses grupos na correspondência. O g é uma flag que torna a substituição global, o que significa que ele aplicará a substituição a todas as correspondências no texto, não apenas à primeira, isso irá possibilitar nossa expressão em transformar números com vários números. E o $1. é o que será usado para substituir a correspondência. $1 é substituído pelo dígito capturado no grupo de captura, e um ponto . é adicionado antes dele.

Em resumo, essa linha de código procura dígitos individuais e adiciona um ponto após cada grupo de três dígitos, criando uma formatação típica de milhares. Por exemplo, transformaria 1234567 em 1.234.567.

Por fim, adicionamos o R$ na frente do valor formatado e atribuimos toda essa lógica de volta ao campo original no input.

valorAlterado = "R$" + valorAlterado;
valor.value = valorAlterado;

Juntando tudo, a função fica desse jeito:

function mascara(valor) {
	var valorAlterado = valor.value;
	valorAlterado = valorAlterado.replace(/\D/g, ""); // Remove todos os não dígitos
	valorAlterado = valorAlterado.replace(/(\d+)(\d{2})$/, "$1,$2"); // Adiciona a parte de centavos
	valorAlterado = valorAlterado.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); // Adiciona pontos a cada três dígitos
	valorAlterado = "R$" + valorAlterado;
	valor.value = valorAlterado;
}

E está criada uma função utilizando as expressões regulares no JavaScript que altera em tempo real os caracteres adicionados em um input criando uma máscara monetária.

Formação Desenvolvedor JavaScript Front-end

Conhecer a formação

Conclusão

Em resumo, a aplicação de expressões regulares na criação de máscaras monetárias representa uma abordagem eficaz e versátil para a formatação de valores financeiros. Essa técnica permite que desenvolvedores personalizem a exibição de números de maneira consistente, tornando a apresentação de informações monetárias mais amigável para os usuários.

Ao empregar expressões regulares de forma estratégica, é possível alcançar um alto grau de controle sobre a formatação, permitindo a adição de símbolos monetários, separadores de milhares e casas decimais com facilidade.

Além disso, a flexibilidade das expressões regulares em linguagens de programação, como JavaScript, oferece a capacidade de adaptar máscaras monetárias de acordo com as necessidades específicas de um projeto. Essa abordagem é especialmente valiosa para a criação de formulários, sistemas financeiros e aplicativos que exigem precisão na representação de valores monetários.

Portanto, a compreensão e aplicação das expressões regulares em cenários monetários são habilidades valiosas para desenvolvedores que desejam fornecer uma experiência mais consistente e amigável aos usuários em relação à formatação de moedas.

E caso você queira saber mais sobre as expressões regulares e entender como utiliza-las no JavaScript, confira o direto ao ponto JavaScript - Trabalhando com expressões regulares.