Valchan

"What we know is a drop.. What we don't know is an ocean." - Isaac Newton

Como criar máscaras(mask) com o regex | Valchan

08 de julho de 2020 • 1 min de leitura

Como criar máscaras(mask) com o regex

Como criar máscaras(mask) para os inputs utilizando o regex.

Essa é uma postagem bem curta com o objetivo de mostrar como adicionar uma máscara enquanto você digita em um campo de texto utilizando o regex.

Segue os códigos:

// 000.000.000-00
const maskCPF = value => {
  return value
    .replace(/\D/g, "")
    .replace(/(\d{3})(\d)/, "$1.$2")
    .replace(/(\d{3})(\d)/, "$1.$2")
    .replace(/(\d{3})(\d{1,2})/, "$1-$2")
    .replace(/(-\d{2})\d+?$/, "$1")
}

// (00) 00000-0000
const maskPhone = value => {
  return value
    .replace(/\D/g, "")
    .replace(/(\d{2})(\d)/, "($1) $2")
    .replace(/(\d{5})(\d{4})(\d)/, "$1-$2")
}

// 00000-000
const maskCEP = value => {
  return value.replace(/\D/g, "").replace(/^(\d{5})(\d{3})+?$/, "$1-$2")
}

// 00/00/0000
const maskDate = value => {
  return value
    .replace(/\D/g, "")
    .replace(/(\d{2})(\d)/, "$1/$2")
    .replace(/(\d{2})(\d)/, "$1/$2")
    .replace(/(\d{4})(\d)/, "$1")
}

// Aceita apenas que letras sejam digitadas
const maskOnlyLetters = value => {
  return value.replace(/[0-9!@#¨$%^&*)(+=._-]+/g, "")
}

// Aceita apenas números
const maskOnlyNumbers = value => {
  return value.replace(/\D/g, "")
}

Caso você queira ver um exemplo:

Link: React Input Mask

Caso você tenha visto algum ponto que possa ser melhorado ou feito diferente e queira compartilhar, só comentar abaixo :3

Comentários