Regex電話號碼實時格式化

在AngularJS中，我需要格式化電話號碼，而他們正在鍵入。我不想使用任何庫，因爲這應該是直接的。Regex電話號碼實時格式化

我需要的格式是：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');

但是，這顯然是添加非所需的空間。

來源

2015-05-31 curuba

那麼這是一個嚴格的正則表達式問題。一旦所有組都被識別，表達式就會匹配。角部分是好的。 – curuba

只需在每次更改時運行正則表達式。爲此，使用onchange或keyup-listener。 – mercredo

您可以節省一些頭痛，並在第二步中刪除「不需要的空間」，將其包裝在過濾器中。 – AJcodez

你說你希望它是「直截了當」，但你人爲地約束問題（通過強制的解決方案是唯一的正則表達式），當純的正則表達式實際上是一個錯誤的解決方案解決這個問題。

爲什麼？因爲你的問題涉及有條件地向輸出中添加新的字符（空格），這些字符可能不會出現在輸入中，但不應該總是添加 - .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(" ");

來源

2015-05-31 18:18:25 Amber

哦，真好！這很棒。我只需要添加一個空值檢查，但除此之外它很棒。 – curuba

@curuba添加了一個調整，以避免空案的答案。 :) – Amber

不錯的更新！謝謝 – curuba

你可以嘗試一個級聯樣式。

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

來源

2015-05-31 18:09:46 sln

這仍然會增加額外的空間，並導致更復雜的正則表達式啓動。沿着這條道路是瘋狂的。 – Amber

@Amber - 空間與什麼有什麼關係？ ''輸入格式的電話號碼「'在每次按鍵時，除了格式化文本外，您再也看不到其他任何內容。就複雜的正則表達式而言，瘋狂......略微誇張，你不覺得嗎？ – sln

如果格式化的值被放回到輸入字段（「正如它被鍵入」時經常指出的那樣），則多餘的空格將導致光標跳動。 – Amber

Regex電話號碼實時格式化

回答

相關問題