Máscara para formatar CNPJ com JavaScript

Neste artigo você vai aprender a como criar uma máscara para formatar CNPJ com JavaScript, de uma maneira super simples e rápida

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre JavaScript, expressões regulares e máscaras!

Para formatar corretamente um CNPJ podemos utilizar a seguinte expressão regular:

/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/

Vamos identificar blocos de dígitos especificamente como diz na expressão: dois, três, três e assim por diante

Agora precisamos transformar estes blocos e inserir os caracteres especiais que são comuns em CNPJ’s, veja um exemplo:

37.356.542/0001-01

Veja o código de como transformar estes números neste formato:

console.log("37356542000101".replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1.$2.$3/$4-$5"))

A nossa expressão regular em conjunto da divisão de blocos: “$1.$2.$3/$4-$5”

Somada a função replace do JavaScript, vai fazer com que o CNPJ seja corretamente formatado

Copiando e colando o console.log no seu navegador você já consegue ver o resultado final

Para atender as necessidades de substituir no HTML, você deverá criar um evento fazendo a substituição do texto do input

Porém a lógica da função será a mesma, você pode utilizá-la da forma que foi exibida aqui

E assim resolvemos o nosso problema para formatar corretamente um CNPJ com JavaScript!

Conclusão

Neste artigo vimos como criar uma máscara para formatar CNPJ

Utilizamos uma expressão regular para separar os valores informados pelo usuário em blocos

Nestes blocos inserimos os caracteres especiais para formar um CNPJ corretamente, resolvendo assim a apresentação final do CNPJ

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube