Phone 号码屏蔽（无插件）

Question

我正在尝试使用 this link 中的示例进行 phone 屏蔽，但没有 success.What 我想做的是删除括号并重新排序。

规则：第一个字符总是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)/, '(')
    .replace(/^(\(\d{3})(\d)/, ') ')
    .replace(/(\d{3})(\d)/, "-")
    .replace(/(-\d{4})\d+?$/, '');
}

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

块将如下所示：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})$/, '   ');

Answer 2

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

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

解释步骤：

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

Phone 号码屏蔽（无插件）

Phone Number Masking (Without Plugin)

javascript

jquery

mask