Номер телефона Regex в реальном времени

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'); 

Но это, очевидно, добавление заменимых требуется пространство.

Answer 1

Вы говорите, что вы хотите быть «прямо вперед», но вы искусственно сдерживая проблему (заставляя решение быть только регулярное выражение) в чистом виде регулярных выражений является плохим решением к этой проблеме.

Почему? Поскольку ваша проблема связана с условным добавлением новых символов в вывод (пробелы), которые могут не отображаться на входе, но не всегда должны быть добавлены - .replace() не имеет возможности справиться с этим.

Вы бы лучше использовать сочетание регулярных выражений и других JavaScript для обработки условного форматирования: (. || [] бит избегает случая, когда матч возвращает null, когда цифры не присутствует)

// 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(" "); 

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* 
        )? 
       )? 
      )? 
    )? 
)?