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 ）