使用正則表達式動態分割字符串

Question

我正在從用戶那里收到一個澳大利亞電話號碼作為文本輸入。 該字符串的長度為10個字符，並以04開頭。我想在用戶輸入字符串時對其進行拆分，因此結果類似於0411 111 111。

我當前的解決方案是value.toString().replace(/^(04\\d{2})(\\d{3})(\\d{3})$/, $1 $2 $3)

此解決方案可以正確地分割字符串，但前提是用戶輸入了整個10個字符。 我希望它在輸入前4個字符（即0411 1等）后開始拆分。

Answer 1

這是一種適用於您的確切用例的襯板：

 var results = "0411111111".split(/(?=\\d{6}$)|(?=\\d{3}$)/); console.log(results); 

我們可能會在正則表達式上分割您的字符串，該正則表達式的目標是4位數字后的點和7位數字后的點。

Answer 2

考慮如下所示的方法，該方法檢查當前輸入的手機號碼的長度，然后根據長度應用不同的正則表達式：

 var mobileInput = document.getElementById('mobile'); mobileInput.addEventListener('keyup', foo); function foo() { var unformatted = mobileInput.value; var pattern, replacer; if (unformatted.length < 5) { pattern = /(04\\d{2})/; replacer = '$1 '; } else if (unformatted.length < 9) { pattern = /(04\\d{2})\\s{1}(\\d{3})/; replacer = '$1 $2 '; } else { pattern = /^(04\\d{2})(\\d{3})(\\d{3})$/; replacer = '$1 $2 $3'; } var formatted = unformatted.replace(pattern, replacer); mobileInput.value = formatted; } 

 <input type="text" id="mobile" /> 

Answer 3

我設法提出了一些解決方案。 這不是我的目標，但確實可以。

value.toString() .replace(/^(04\\d{2})(\\d{3})(\\d{3})$/, $1 $2 $3) .replace(/[\\s-]+$/, "")

這會在每次按鍵時（每次調用正則表達式時）去除空白並重新格式化。

Answer 4

這是我的解決方案：

1. 刪除之前添加的空格（以恢復被拆分的電話號碼）
2. 嘗試使用正則表達式匹配輸入
3. 結合比賽並處理其他情況

碼：

 document.getElementById("phone").addEventListener("input", function() { var matches = this.value.replace(/ /g, "").match(/^(04\\d{2})(\\d{3})?(\\d{3})?(\\d*?)$/); this.value = matches && matches.length > 2 ? matches.slice(1, matches.length - 1).join(" ") + (matches[matches.length - 1] || "") : this.value; }); 

 <input id="phone" maxlength="12"> 

Answer 5

我可能會做這樣的事情：

 let phone = document.getElementById('phone'); phone.addEventListener('keyup', evt => { // get value, removing anything that isn't a number let text = phone.value.replace(/\\D/g, ''); // turn it into an array text = text.split(''); // create a new array containing each group of digits, separated by spaces let out = [...text.slice(0, 4), ' ', ...text.slice(4, 7), ' ', ...text.slice(7, 10)]; // turn it back into a string, remove any trailing spaces phone.value = out.join('').trim(); }, false); 

 <input id="phone">