電話號碼屏蔽（無插件）

Question

我正在嘗試使用此鏈接中的示例進行電話屏蔽，但沒有成功。我想要做的是刪除括號並重新排序。

規則：第一個字符始終為 5。形式為 3 4 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');
}

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{4})(\d{1,2})/, '$1 $2')
    .replace(/(\d{4}\s\d{2})(\d{1,2})/, '$1 $2')
    .replace(/(\d{4}\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. 制作新的 2 組：第一個有 4 位數字，第二個有一個或兩個數字，並在它們之間添加一個空格。 如上一步按3分組，這一步只會影響新的數字： .replace(/(\d{4})(\d{1,2})/, '$1 $2')
5. 讓其他人 2 組：第一個有 4-space-2-digits，第二個有一個或兩個數字，並在它們之間添加一個空格： .replace(/(\d{4}\s\d{2})(\d{1,2})/, '$1 $2')
6. 為了防止添加更多的數字，在序列 4-space-2-space-2-digits 完成后，結束字符串： .replace(/(\d{4}\s\d{2}\s\d{2})\d+?$/, '$1')