Máscara para campo de CPF ou CNPJ

Introdução

Durante meu primeiro estágio como desenvolvedor eu precisei lidar com um campo que de busca que filtrava por CPF ou CNPJ. Pensei que seria algo simples, mas acabei tendo mais problemas do que esperava, principalmente por ser minha primeira vez utilizando regex - ou expressões regulares.

Pensando nisso, decidi fazer um post super curtinho mostrando para vocês a máscara que eu utilizei.

Máscara

A máscara funciona da seguinte maneira: o usuário digita o valor que deseja procurar e, se esse valor possuir menos de 12 caracteres, será aplicado a máscara de CPF, caso contrário será aplicada a máscara de CNPJ.

A máscara:

export const mask = (v: string) => {
  v = v.replace(/\D/g, "")

  if (v.length <= 11) {
    v = v.replace(/(\d{3})(\d)/, "$1.$2")
    v = v.replace(/(\d{3})(\d)/, "$1.$2")
    v = v.replace(/(\d{3})(\d{1,2})$/, "$1-$2")
  } else {
    v = v.replace(/^(\d{2})(\d)/, "$1.$2")
    v = v.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3")
    v = v.replace(/\.(\d{3})(\d)/, ".$1/$2")
    v = v.replace(/(\d{4})(\d)/, "$1-$2")
  }

  return v
}

Como utilizar

Tendo em vista que você colocou essa máscara em um arquivo separado, basta importarmos ela no mesmo arquivo do nosso input:

import { mask } from "./nomeArquivo.js"

Agora que você já importou a função, basta passarmos como parâmetro o event.target.value do input que você deseja aplicar o filtro:

const [valor, setValor] = useState('')

function handleChangeMask(event) {
    const { value } = event.target

    setValor(mask(value))
}

...

 <input onChange={handleChangeMask} value={valor} />

Conclusão

Por hoje é só pessoal, espero que o post possa ter sido útil!

Se surgirem dúvidas ou sugestões, não deixem de mandar aqui nos comentários!