JS通過正則表達式設置輸入值

Question

我在 html 上有簡單的輸入，我想當用戶將文本值放入輸入值時，我的正則表達式模式會自動設置示例：我有時間選擇器輸入 我希望用戶在輸入數字時，該值會在輸入中自動格式化。 如何用正則表達式替換 function？

我試着這樣做，但最后我只是得到了我輸入的字符串。

console.log(value.replace(/^(([0-9]{1})|([0-1]{1}[0-9]{1})|([2]{1}[0-3]{1}))(([:]{1})?)(([0-5]{1}[0-9]?)?)$/g, ''));

Answer 1

如果您使用的是 UI 框架，請參閱他們的文檔，他們可能有一個插件可以為您完成。 或者，如果您想自己做：

從 HTML 端，您可以使用type="time"屬性（請檢查瀏覽器對此的支持）。

例如，從 JavaScript 開始，您可以在提交表單時使用類似^([01]\d|2[0-3]):?([0-5]\d)$的內容。

 const TIME_REGEX = /([01]\d|2[0-3]):?([0-5]\d)$/; const myTimeElm = document.getElementById('myTime'); const outputElm = document.getElementById('output'); let timer; outputElm.addEventListener('click', () => { if (TIME_REGEX.test(myTimeElm.value)) { outputElm.innerText = myTimeElm.value; } else { outputElm.innerText = "Error;" } });

 #output { cursor: pointer; }

 <input type="time" id="myTime" value="00:00"> <span id="output">click here!</span>

如果您不想使用 HTML 的 type="time"，請考慮為您的輸入使用一個掩碼，您可以在其中記錄用戶的輸入並在不同的組件中呈現格式化的 output。

由於單獨使用 RegEx 無法獲得與您可能想要鍛煉輸入的 cursor position 相同的用戶體驗。

或者簡單地使用一個為你做這件事的庫（例如Cleave.js ）