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:

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

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

Adicionar uma seção nova, com subtítulo em pergunta tipo ‘Como aplicar a máscara direto no input?’, mostrando o evento na prática. Explicar o porquê antes do como: a gente quer que o CNPJ vá se formatando enquanto a pessoa digita, então a gente escuta o evento de digitação do campo e reescreve o valor já formatado. Trazer o código real do listener, algo como:

document.querySelector(‘#cnpj’).addEventListener(‘input’, function(e) { e.target.value = e.target.value.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2}).*/, ‘$1.$2.$3/$4-$5’) })

E avisar o leitor de um detalhe que ele vai esbarrar: se o usuário digitar letra ou colar texto com espaço, a máscara buga, então o ideal é limpar tudo que não é dígito antes de formatar (um replace de /\D/g por ” primeiro). Isso responde a busca de quem não quer só o console.log, quer aplicar no formulário de verdade

Adicionar um bloco curto empacotando a lógica numa função, pra pessoa reaproveitar em qualquer lugar do projeto sem copiar a regex toda vez. Algo como:

function formatarCNPJ(valor) { return valor .replace(/\D/g, ”) .replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2}).*/, ‘$1.$2.$3/$4-$5’) }

console.log(formatarCNPJ(‘37356542000101’))

Explicar em uma linha que o primeiro replace tira tudo que não é número e o segundo aplica a máscara, então dá pra jogar essa função em qualquer input, botão ou validação. Fechar com o convite de sempre no tom dele, tipo ‘Bora testar aí no seu projeto?’

Adicionar 2 ou 3 perguntas frequentes que a busca demanda e o post ainda não responde:

‘A mesma lógica serve pra CPF?’ Sim, muda só a expressão regular e os blocos de dígitos: CPF são três blocos de três mais dois no fim, então o padrão vira /^(\d{3})(\d{3})(\d{3})(\d{2})/ com a substituição ‘$1.$2.$3-$4’

‘Essa máscara valida o CNPJ?’ Não, formatar e validar são coisas diferentes: a máscara só arruma a aparência (pontos, barra e traço), ela não confere se o CNPJ é matematicamente válido pelos dígitos verificadores

‘Preciso de biblioteca pra isso?’ Não, é só JavaScript puro com replace e expressão regular, sem instalar nada