输入框手机号/10位数字实时掩码脚本失效问题排查

你的脚本没能正常工作主要有几个关键问题，我来逐个拆解并帮你修正：

核心问题点 #

• 替换后未更新输入框内容：你只完成了字符串替换，但没有把格式化后的文本赋值回#subject的value属性，所以输入框里的内容根本不会变化。
• 错误使用match结果作为替换目标：match()返回的是一个匹配结果的数组，直接把数组传给replace()会导致不符合预期的替换行为，应该直接用正则表达式作为替换的匹配规则。
• 未处理变量作用域：formattedPhone没有用let/const声明，会变成全局变量，这不是最佳实践。
• 重复格式化风险：如果用户继续输入，已经格式化的内容可能会被重复处理，需要避免这种情况。

修正后的代码 #

$("#subject").on('keyup', function() {
  // 匹配10位连续数字，用单词边界确保匹配完整的10位数字
  const phoneNumberRegex = /\b\d{10}\b/g;
  let questionText = this.value; // 直接用this指代当前元素，更简洁
  
  // 用正则替换，把10位数字转成###-###-####格式
  const formattedText = questionText.replace(phoneNumberRegex, function(match) {
    return `${match.slice(0,3)}-${match.slice(3,6)}-${match.slice(6)}`;
  });
  
  // 只有内容变化时才更新输入框，避免不必要的重绘
  if (formattedText !== questionText) {
    this.value = formattedText;
  }
});

代码解释 #

1. 直接使用正则替换：不再依赖match()，而是让replace()直接用正则匹配10位数字，\b（单词边界）能确保我们匹配的是完整的10位数字，不会误匹配更长数字串里的片段。
2. 更新输入框内容：把格式化后的formattedText赋值回this.value，这样输入框才会显示变化后的内容。
3. 避免重复格式化：正则里的\b会跳过已经带横杠的格式化内容（横杠不属于单词字符，###-###-####不会被识别为10位数字），同时添加内容判断，只有当格式化前后内容不同时才更新，提升性能。
4. 更简洁的元素引用：用this指代当前触发事件的输入框，比document.getElementById('subject')更简洁，也和jQuery的上下文逻辑一致。

额外优化建议 #

• 可以把keyup换成input事件，它能覆盖粘贴、拖拽等非键盘输入场景，兼容性更好。
• 如果需要更精准的手机号匹配（比如限制开头数字范围），可以调整正则规则，比如/b[1-9]\d{9}\b/g来排除以0开头的10位数字。

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