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
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:
.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')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');