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