电话号码屏蔽（无插件）

Question

我正在尝试使用this link 中的示例进行电话屏蔽，但没有成功。我想要做的是删除括号并重新排序。

规则：第一个字符总是5。 以 3 3 2 2 的形式，示例：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');
}

---

很抱歉在第一篇文章中误报了区块。完成后不允许输入新的字符。

区块如下：3 3 2 2 / 示例：532 123 45 67

Answer 1

有一个更简单的方法：

1- 删除任何非数字字符

2- 将数字格式化为“3 4 2 2”（或任何其他方式）

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

Answer 2

正则表达式可能很棘手，但我喜欢结果有多好:)

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')
}

说明步骤：

1. 要只允许数字，请将非数字替换为空字符串：.replace(/\D/g, '')
2. 开头只允许 5，所以用空字符串替换第一个不是 5 的数字：.replace(/(^[^5])/, '')
3. 制作 2 个组：第一个组有 3 个数字，并在它们之间添加一个空格： .replace(/(\d{3})(\d)/, '$1 $2')
4. 在 3-space-3 位之后，在该组和其余组之间添加另一个空格：.replace(/(\d{3}\s\d{3})(\d{1,2})/, '$1 $2')
5. 在 3-space-3-space-2 位之后，在该组和其余组之间添加另一个空格：.replace(/(\d{3}\s\d{3}\s\d{2})(\d{1,2})/, '$1 $2')
6. 一旦序列 3-space-3-space-2-space-2-digits 完成，结束字符串：.replace(/(\d{3}\s\d{3}\s\d{2}\s\d{2})\d+?$/, '$1')