CODEWITHSUNDEEP
javascriptjquerymask
alon3wolf
alon3wolf

Reputation: 33

Phone Number Masking (Without Plugin)

I'm trying to do phone masking using the example in this link, but without success.What I want to do is remove the parentheses and reorder.

Rule: the first character is always 5. In the form of 3 3 2 2, example: 532 123 45 67

const $input = document.querySelector('[data-js="input"]')
$input.addEventListener('input', handleInput, false)

function handleInput (e) {
  e.target.value = phoneMask(e.target.value)
}

function phoneMask (phone) {
  return phone.replace(/\D/g, '')
    .replace(/^(\d)/, '($1')
    .replace(/^(\(\d{3})(\d)/, '$1) $2')
    .replace(/(\d{3})(\d)/, "$1-$2")
    .replace(/(-\d{4})\d+?$/, '$1');
}

Sorry for misreporting blocks in the first post. No new character entry should be allowed upon completion.

The blocks will be as follows: 3 3 2 2 / Example : 532 123 45 67

Upvotes: 2

Views: 3892

Answers (2)

Nat
Nat

Reputation: 333

Regex can be tricky but I love how nice is the result :)

function phoneMask (phone) {
  return phone.replace(/\D/g, '')
    .replace(/(^[^5])/, '')
    .replace(/(\d{3})(\d)/, '$1 $2')
    .replace(/(\d{3}\s\d{3})(\d{1,2})/, '$1 $2')
    .replace(/(\d{3}\s\d{3}\s\d{2})(\d{1,2})/, '$1 $2')
    .replace(/(\d{3}\s\d{3}\s\d{2}\s\d{2})\d+?$/, '$1')
}

Explained steps:

  1. To only allow numbers, replace non-digits with empty string: .replace(/\D/g, '')
  2. Allow only 5 at the beginning, so replace first digit which isn't 5 by empty string: .replace(/(^[^5])/, '')
  3. Make 2 groups: the first with 3 digits and add a space between them: .replace(/(\d{3})(\d)/, '$1 $2')
  4. After having 3-space-3 digits, add another space between that group and the rest: .replace(/(\d{3}\s\d{3})(\d{1,2})/, '$1 $2')
  5. After having 3-space-3-space-2 digits, add another space between that group and the rest: .replace(/(\d{3}\s\d{3}\s\d{2})(\d{1,2})/, '$1 $2')
  6. Once the sequence 3-space-3-space-2-space-2-digits is completed, end string: .replace(/(\d{3}\s\d{3}\s\d{2}\s\d{2})\d+?$/, '$1')

Upvotes: 2

E-telier
E-telier

Reputation: 821

There is an easier way :

1- Remove any non-number character

2- Format the numbers as "3 4 2 2" (or any other way)

  phone = '+ (123) 45678901';
  phone = phone.replace(/[^0-9]+/gim, '');
  phone = phone.replace(/^([0-9]{3})([0-9]{4})([0-9]{2})([0-9]{2})$/, '$1 $2 $3 $4');

Upvotes: 0

Related Questions