Criando máscara monetária com expressões regulares \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 08 Horas 46 Min 12 Seg Tempo restante da oferta: 08 46 12 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Criando máscara monetária com expressões regulares [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # Criando máscara monetária com expressões regulares Nesse artigo aprenderemos a criar uma máscara para inputs que irá deixar seus projetos mais profissionais utilizando as expressões regulares. [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 3 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/Criando_mascara_monetaria_com_expressoes_regulares.jpg) 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. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-GIT.jpg) ](https://www.treinaweb.com.br/ebook/guia-git/) ## O que são as expressões regulares [Expressões regulares](https://www.treinaweb.com.br/ebook/guia-rapido-de-regex/ "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](https://www.treinaweb.com.br/blog/guia-da-linguagem-html "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: ```html ``` 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)](https://www.treinaweb.com.br/blog/o-que-e-dom-virtual-dom-e-shadow-dom "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](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript "JavaScript"). [ ![JavaScript - Manipulação de elementos HTML no DOM](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Manipulação de elementos HTML no DOM Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-manipulacao-de-elementos-html-no-dom) ### 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: ```javascript 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: ```javascript 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. ```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: ```javascript 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`. [ ![RegEx - Expressões Regulares](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/regex.svg) Curso RegEx - Expressões Regulares Conhecer o curso ](https://www.treinaweb.com.br/curso/regex-expressoes-regulares-completo) #### 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: ```javascript 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. ```javascript valorAlterado = "R$" + valorAlterado; valor.value = valorAlterado; ``` Juntando tudo, a função fica desse jeito: ```javascript 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. [ ![Desenvolvedor JavaScript Front-end](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Formação Desenvolvedor JavaScript Front-end Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-javascript-front-end) ## 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](https://www.treinaweb.com.br/direto-ao-ponto/javascript-trabalhando-com-expressoes-regulares "JavaScript - Trabalhando com expressões regulares"). - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #Regex ](https://www.treinaweb.com.br/blog/tag/regex) - [ #Expressão Regular ](https://www.treinaweb.com.br/blog/tag/expressao-regular) - [ #Máscara Monetária ](https://www.treinaweb.com.br/blog/tag/mascara-monetaria) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/24120107/streams-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Streams no PHP ](https://www.treinaweb.com.br/blog/streams-no-php) Você, desenvolvedor PHP, já teve a oportunidade de trabalhar mais intimamente com Streams? Se você já teve ou não, esse artigo é pra você! Uma introdução ao essencial sobre o assunto. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/05/Criando_componente_snackbar_com_JavaScript_e_CSS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ Criando componente snackbar com JavaScript e CSS ](https://www.treinaweb.com.br/blog/criando-componente-snackbar-com-javascript-e-css) Nesse artigo, você irá ter o passo a passo de como criar um componente de snackbar do zero. Sendo capaz de adapta-lo como preferir. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Criando CRUD com Prisma ORM e NestJS ](https://www.treinaweb.com.br/blog/criando-crud-com-prisma-orm-e-nestjs) Neste artigo vamos implementar um CRUD com Prisma ORM e NestJS, abordando as principais operações básicas com o banco de dados. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/criando-componentes-tailwindcss-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Criando componentes com Tailwind CSS ](https://www.treinaweb.com.br/blog/criando-componentes-com-tailwind-css) Neste artigo veremos por que os componentes nos ajudam durante o desenvolvimento do nosso projeto e como conseguimos criá-los com Tailwind CSS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/CRIANDO-PRIMEIRO-CRUD-COM-NESTJS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Criando o primeiro CRUD com NestJS ](https://www.treinaweb.com.br/blog/criando-o-primeiro-crud-com-nestjs) Neste artigo veremos como criar um CRUD com NestJS, o passo a passo utilizando ferramentas como o TypeORM e o banco de dados SQLite. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/03/o-que-e-fastapi-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Criando o primeiro CRUD com FastAPI ](https://www.treinaweb.com.br/blog/criando-o-primeiro-crud-com-fastapi) Neste artigo nós iremos aprender um pouco mais sobre o FastAPI durante o desenvolvimento de uma API com todas as operações de CRUD. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/01/criando-uma-api-com-spring-data-jpa-e-spring-web-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 5 anos atrás ## [ Criando uma API com Spring Data JPA e Spring Web ](https://www.treinaweb.com.br/blog/criando-uma-api-com-spring-data-jpa-e-spring-web) Neste artigo vamos aprender como criar uma API com persistência de dados utilizando o Spring Web MVC e o Spring Data JPA. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox.png-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Criando a estrutura de um Layout com CSS Grid e Flexbox ](https://www.treinaweb.com.br/blog/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox) Nesse artigo vamos aprender sobre as funcionalidades CSS Grid e FlexBox do CSS na pratica durante o desenvolvimento de layout. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/ROTAS-EXPRESS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Criando Rotas com Express.js ](https://www.treinaweb.com.br/blog/criando-rotas-com-express-js) Vamos aprender a configurar rotas com o Express.js, com exemplos utilizando as requisições GET, POST, PUT e DELETE. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/SERVIDOR-HTTP-EXPRESS-JS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Criando um servidor HTTP com Express ](https://www.treinaweb.com.br/blog/criando-um-servidor-http-com-express) O Express é um framework utilizado em conjunto com o Node.js. Ele possui características que facilitam o desenvolvimento de nossas aplicações web e APIs, como um sistema de rotas completo, tratamento de exceções, gerenciamento de requisições HTTP e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/criando-uma-aplicacao-c-com-gtk-no-codeblocks-400x280.png) [ C ](https://www.treinaweb.com.br/blog/categoria/c) 6 anos atrás ## [ Criando uma aplicação C com GTK no Code::Blocks ](https://www.treinaweb.com.br/blog/criando-uma-aplicacao-c-com-gtk-no-codeblocks) Veja como configurar o GTK no Code::Blocks e passe a utilizar esta IDE para criar seus projetos em C com interfaces gráficas. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **08h 46min 12s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58