正则表达式为每个写入的字符格式化电话号码

Question

我需要一个正则表达式来在用户每次写入字符时格式化电话号码。正则表达式必须采用马桑比克和安哥拉的电话格式。

我尝试执行这两种正则表达式格式： 莫桑比克：

return numericPhone.replace(/^(\d{2})(\d{3})(\d{4})$/, '+258 $1 $2 $3');

安哥拉：

return numericPhone.replace(/^(\d{3})(\d{3})(\d{3})$/, '+244 $1 $2 $3');

两者都在应用格式，但它是在电话号码完全写入后应用的，并且我无法删除输入中的电话号码。

我正确地应用了巴西的这个，应用于每个写的字符：

return numericPhone.replace(/(\d{2})(\d)/, '($1) $2').replace(/(\d)( \d{4})$/, '$1-$2');

Answer 1

尝试使用模式格式化数字，而不是正则表达式。

例如

'+p xx xxx xxxx'

并在清理输入后替换令牌。

document.querySelectorAll('.phone')
  .forEach(el => {
    el.value = `+${el.dataset.prefix} `;
    el.addEventListener('input', handleInput);
  });

function handleInput({ target }) {
  const { prefix } = target.dataset;
  // Remove non-digit characters but keep checking the prefix
  const rawValue = target.value.trim();
  const digits = rawValue.replace(/[^\d]/g, '');

  // If all digits are deleted or prefix is altered, reset to formatted prefix
  if (digits.slice(0, prefix.length) !== prefix || digits.length < prefix.length) {
    target.value = `+${prefix} `;
    return;
  }

  // Format number if digits are present
  if (digits.length >= prefix.length) {
    target.value = formatNumber('+p xx xxx xxxx', prefix, digits);
  }
}

function formatNumber(pattern, prefix, digits) {
  // Skip prefix digits in formatting
  let index = digits.slice(0, prefix.length) === prefix ?  prefix.length : 0;
  return pattern
    .replace(/p/, () => prefix)
    .replace(/x/g, () => digits[index++] ?? '')
    .trim();
}

<input type="text" class="phone" data-prefix="258">