How to add Card Mask?

Question

I’m having a problem to re-adapt this function in JS.

function mcc(v){
v=v.replace(/\D/g,"");
v=v.replace(/^(\d{4})(\d)/g,"$1 $2");
v=v.replace(/^(\d{4})\s(\d{4})(\d)/g,"$1 $2 $3");
v=v.replace(/^(\d{4})\s(\d{4})\s(\d{4})(\d)/g,"$1 $2 $3 $4");
return v;
}

Basically it adds one('space') to every 4 digits. I would like to add one dot instead of space.

What should I change?

Answer 1

You don’t need to be in so much condition for different scenarios.

You can keep it simple and do it like this:

function mcc(v) {
    v = v.replace(/\D/g, "");
    return v.match(/\d{1,4}/g).join('.');
}

const testes = ['3 3 3', '333333333333', '33333'];
console.log(JSON.stringify(testes.map(mcc)));

Using \d{1,4}/g regex will search groups from 1 to 4 and the .join('.'); joins these pieces with ..

Answer 2

The code below:

• Allows only digits;

• Put a dot every 4 characters;

• Remove the point if left over;

• Limits the size;

function mcc(v){
  v = v.replace(/\D/g,""); // Permite apenas dígitos
  v = v.replace(/(\d{4})/g, "$1."); // Coloca um ponto a cada 4 caracteres
  v = v.replace(/\.$/, ""); // Remove o ponto se estiver sobrando
  v = v.substring(0, 19)// Limita o tamanho

  return v;
}

console.log(mcc("12341234123412341"))