JS set input value by regex

Question

I have simple input on my html and i want to when user putting text value in the input value was automatically set by my regex pattern Example: I have time picker input and I want the user when he enters numbers, the value is automatically formatted in the input. How to do it with regex and replace function?

I tried to do it this way, but in the end I just get the string that I enter.

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

If you are using a UI framework, refer to their documentation they would probably have a plugin to do it for you. Or if you want to do it on your own:

From the HTML side you can use type="time" attribute (please check the browser support for this ).

And from JavaScript you can use something like ^([01]\d|2[0-3]):?([0-5]\d)$ on form submission for example.

 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>

If you don't want to use HTML's type="time", consider using a mask for your input where you record the user's input and render the formatted output in a different component.

Since using the RegEx alone won't achieve the same user experience as you may want to workout the input's cursor position.

Or simple use a library that does that for you ( Cleave.js for example)