无插件实现手机号掩码：首字符为5的3322空格分隔格式化

实现代码 #

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) {
  // 移除所有非数字字符
  let cleaned = phone.replace(/\D/g, '')
  // 强制首字符为5，若首字符不符合自动修正
  if (cleaned.length > 0 && cleaned[0] !== '5') {
    cleaned = '5' + cleaned.slice(1)
  }
  // 截断超出10位的部分，满额后无法再输入新字符
  cleaned = cleaned.slice(0, 10)
  // 按照3 3 2 2规则添加空格分隔
  return cleaned
    .replace(/^(\d{3})(\d)/, '$1 $2')
    .replace(/^(\d{3})\s(\d{3})(\d)/, '$1 $2 $3')
    .replace(/^(\d{3})\s(\d{3})\s(\d{2})(\d)/, '$1 $2 $3 $4')
}

逻辑说明 #

• 自动过滤所有非数字输入，避免无效字符干扰
• 强制首字符固定为5，不符合规则的首字符会被自动替换
• 总数字长度限制为10位，超出部分直接截断，达到长度上限后无法再输入新内容
• 分隔格式完全匹配要求，最终效果为XXX XXX XX XX，和示例532 123 45 67一致

内容的提问来源于stack exchange，提问作者alon3wolf