JavaScript 替換僅在使用組時在正則表達式的完全匹配時執行

Question

我正在嘗試使用以下模式創建輸入掩碼：“4.01.05.01-6”。 在 onchange 方法中，我執行了一個使用 replace 方法的 function：

value = value
.replace(/\D/g, '')
.replace(
/^(\d{1})(\d{2})(\d{2})(\d{2})(\d{1})/,
'$1.$2.$3.$4-$5'
)

問題是，當我有 8 位數字時，正則表達式完全匹配后，我才收到屏蔽的輸入值。 那不是我想要的。 我想輸入輸入，並且在我輸入時掩碼將起作用，例如，如果我只是輸入“1234”，我想輸入值“1.23.4”

OBS：我不關心以下信息，但我正在使用帶有受控輸入的 React，這個名為“value”的變量用於創建 setState。

Answer 1

使用可選的非捕獲組使正則表達式的所有部分，但第一個部分是可選的。 然后，您可以在用作替換參數的回調 function 中檢查每個可選組是否匹配，並動態構建替換字符串。

請參閱 JavaScript 演示：

 function App() { const [Version, setVersion] = React.useState('') function maskVersion({ target: { value } }) { const re = /^(\d)(?:(\d{1,2})(?:(\d{1,2})(?:(\d{1,2})(\d)?)?)?)?[\w\W]*$/ setVersion(value.replace(/\D/g,'').replace(re, (_,a,b,c,d,e) => a + ( b? `.${b}`: "") + ( c? `.${c}`: "") + ( d? `.${d}`: "") + ( e? `-${e}`: "") )) } return <div> Text: <input type='text' onChange={maskVersion} value={Version} /> </div> } ReactDOM.render(<App/>, document.querySelector('#root'))

 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>

正則表達式 - 查看其在線演示- 匹配：

• ^ - 字符串的開頭
• (\d) - 捕獲組 1 ( a )：一位
• (?:(\d{1,2})(?:(\d{1,2})(?:(\d{1,2})(\d)?)?)?)? - 一個可選的非捕獲組匹配
  • (\d{1,2}) - 捕獲組 2 ( b )：一位或兩位數
  • (?:(\d{1,2})(?:(\d{1,2})(\d)?)?)? - 一個可選的非捕獲組匹配
    • (\d{1,2}) - 捕獲組 3 ( c )：一位或兩位數
    • (?:(\d{1,2})(\d)?)? - 一個可選的非捕獲組匹配
      • (\d{1,2}) - 捕獲組 4 ( d )：一位或兩位數
      • (\d)? - 一個可選的捕獲組 5 ( e ): on digit
• [\w\W]* - 任何零個或多個字符（如果鍵入更多字符，則截斷輸入字符串）
• $ - 字符串結束。

替換是使用三元運算符構建的，如果b匹配，則附加一個點加b值，如果匹配c或d ，同樣發生，如果有e組匹配，a -和e組值.

Answer 2

我想不出任何辦法只用正則表達式。 我認為你應該用輸入的長度來判斷，所以當輸入的長度是 3 位時，然后只像這樣運行這些數字的替換

if(value.length >= 2 && value.length <= 3){
value.replace(
/^(\d{1})(\d{1,2})/,
'$1.$2'
)
}

對數字長度為 4 - 5 等的情況執行相同操作。

所以整個代碼可能是這樣的

if(value.length >= 2 && value.length <= 3){
value.replace(
/^(\d{1})(\d{1,2})/,
'$1.$2'
)
}else if(value.length >= 4 && value.length <= 5){
value.replace(
/^(\d{1})(\d{2})(\d{1,2})/,
'$1.$2.$3'
)
}else if(value.length >= 6 && value.length <= 7){
value.replace(
/^(\d{1})(\d{2})(\d{2})(\d{1,2})/,
'$1.$2.$3.$4'
)
}else if(value.length == 8){
value.replace(
/^(\d{1})(\d{2})(\d{2})(\d{2})(\d{1})/,
'$1.$2.$3.$4-$5'
)
}

也許我在上面的代碼中有一些錯誤，但我認為你明白了