正则表达式电话号码实时格式化

Question

在AngularJS中，我需要在输入电话号码时进行格式化。 我不想使用任何库，因为这应该是很简单的。 我需要的格式是：99 99 99 99 99。

var phone = tel.replace(/\D*(\d{2})\D*(\d{2})\D*(\d{2})\D*(\d{2})\D*(\d{2})\D*/, '$1 $2 $3 $4 $5');

但是这只有在完全输入数字后才会格式化我的数字。那么当数字尚未完全输入时，我怎样才能让这个正则表达式起作用呢？

然后我尝试了这个：

var phone = tel.replace(/\D*(\d{2})\D*(\d{0,2})?\D*(\d{0,2})?\D*(\d{0,2})?\D*(\d{0,2})?\D*/, '$1 $2 $3 $4 $5');

但是这显然增加了不必要的空格。

- curuba

---

嗯，这是一个纯粹的正则表达式问题。一旦所有组别都被识别出来，该表达式就会匹配一次。Angular部分没问题。 - curuba

只需在每次更改时运行正则表达式。为此，请使用onchange或keyup监听器。 - mercredo

你可以在第二步中使用过滤器来消除“非必需空格”，这样可以避免一些麻烦。 - AJcodez

好主意 @AJcodez。我会继续这个想法。谢谢。 - curuba

@mercredo 这不是我的问题。我正在使用 $watch 来确保它被正确触发。 - curuba

它添加尾随空格并不重要。它们不可见，对吧？只需进行级联样式匹配即可。 - user557597

Answer 1

您说希望这个问题“简单明了”，但是您在强制解决方案只能是正则表达式时，人为地限制了问题的范围。 然而，纯粹的正则表达式实际上并不是解决此问题的最佳方案，为什么呢？因为您的问题涉及有条件地向输出中添加新字符（空格），这些字符可能不会出现在输入中，但不应始终添加- .replace() 无法处理这种情况。

您最好使用正则表达式和其他JavaScript组合来处理条件格式：

// Get only the digits from the string
var phoneDigits = tel.replace(/\D/g, "");
// Join together the first up-to-5 pairs of digits with spaces,
// allowing for a singleton if the number of digits is odd.
var phone = (phoneDigits.match(/\d\d?/g) || []).slice(0,5).join(" ");

（|| []避免了在没有数字的情况下匹配返回null的情况。）

- Amber

---

哦，不错！这太棒了。我只需要添加一个空值检查，但除此之外它很棒。 - curuba

@curuba在答案中添加了一个小调整，以避免空值情况。 :) - Amber

Answer 2

你可以尝试使用层叠样式模式。 var phone = tel.replace(/\D*(?:(\d{2})\D*(?:(\d{2})\D*(?:(\d{2})\D*(?:(\d{2})\D*(?:(\d{2})\D*)?)?)?)?)?/, '$1 $2 $3 $4 $5');

 \D* 
 (?:
      ( \d{2} )                     # (1)
      \D* 

      (?:
           ( \d{2} )                     # (2)
           \D* 

           (?:
                ( \d{2} )                     # (3)
                \D* 

                (?:
                     ( \d{2} )                     # (4)
                     \D* 

                     (?:
                          ( \d{2} )                     # (5)
                          \D* 
                     )?
                )?
           )?
      )?
 )?

- user557597

---

这仍然会添加额外的空格，并导致更复杂的正则表达式。沿着这条路走只会导致疯狂。 - Amber

@Amber - 空格与此有何关系？“在输入电话号码时格式化它们”每次按键时，您只会看到格式化的文本。至于复杂的正则表达式，疯狂..这不是有点夸张了吗？ - user557597

如果格式化的值被放回到输入框中（通常表示正在输入），那么多余的空格将导致光标跳动。 - Amber

@amber - 我想你仍然可以使用所有捕获缓冲区进行回调替换，然后再进行简单的修剪调用？ - user557597