我有简单的输入我的html，我想当用户把输入值中的文本值是由我的正则表达式模式自动设置示例：我有时间选择器input，我想用户当他输入数字，该值是自动格式化的输入。如何做到这一点与正则表达式和替换函数？我试着这样做，但最后我只得到了我输入的字符串。
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, ''));
i2byvkas1#
如果你使用的是UI框架，请参考他们的文档，他们可能会为你提供一个插件。或者如果你想自己做：在HTML端，您可以使用type="time"属性（请检查browser support for this）。例如，在JavaScript中，您可以在表单提交中使用类似^([01]\d|2[0-3]):?([0-5]\d)$的内容。
type="time"
^([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"，可以考虑使用掩码来记录用户的输入，并在不同的组件中呈现格式化的输出。由于单独使用RegEx无法获得与您可能希望的输入光标位置相同的用户体验。或者简单地使用一个库来为你做这些（例如Cleave.js）
1条答案
按热度按时间i2byvkas1#
如果你使用的是UI框架，请参考他们的文档，他们可能会为你提供一个插件。或者如果你想自己做：
在HTML端，您可以使用
type="time"属性（请检查browser support for this）。例如，在JavaScript中，您可以在表单提交中使用类似
^([01]\d|2[0-3]):?([0-5]\d)$的内容。如果不想使用HTML的type ="time"，可以考虑使用掩码来记录用户的输入，并在不同的组件中呈现格式化的输出。
由于单独使用RegEx无法获得与您可能希望的输入光标位置相同的用户体验。
或者简单地使用一个库来为你做这些（例如Cleave.js）