Enter two digits between 0 and 59 after ":"

Question

I want to enter after : a value from 0 to 59 max. For example:

350:59
20:22

This code works but max after : is 99

$("#duration").on('input', function() { 
  this.value = this.value.match(/^\d+\:?\d{0,2}/); 
});

Answer 1

Welcome to StackOverflow :)

As I said in the comments, you can specify what characters are you expecting, if you say it's from 00 to 59, you can easily specify it

/\d{1,}\:[0-5][0-9]/g

• \d{1,} starts with a decimal number [0-9] that can have 1 or more characters
• \: followed by :
• [0-5] follow digit must be from 0 to 5
• [0-9] follow digit must be from 0 to 9

live example https://regex101.com/r/9Zq1Lm/1

---

you can also, copy paste the code below and execute in the browser console

const regex = /\d{1,}\:[0-5][0-9]/g;
const str = `350:59
20:22
1:68
0:12
24:75`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }

    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

Answer 2

TL;DR

For values entered character by character, try this:

$('#duration').on('input', function() { 
    this.value = this.value.match(/^\d+\:?[0-5]?[0-9]?/); 
});

Background

This kind of setup will depend heavily on what kind of input that is expected, and how the input value is entered. I.e. if it is being typed in, pasted as a whole or inserted by a function.

Your current solution is relying on the fact that we can assign the match() function’s result immediately as the input field’s value.

The String.prototype.match() function will return the following:

An Array whose contents depend on the presence or absence of the global (g) flag, or null if no matches are found.

Consider an input of "42:100"

const result = '42:100'.match(/^\d+\:?\d{0,2}/);

match() returns:

["42:10", index: 0, input: "42:100", groups: undefined]

which we immediately assign back to the input field. It will opt to display the first item in that array, i.e. "42:10".

If match() would not find a matching pattern then it returns null and the input field goes blank.

Possible solution

So, with that info, we now know that if a human is typing the value one character at a time it is important that the regular expression will always be able to match an expected pattern, for every legal input value, so that it in turn can be assigned back to the input field.

From the original regex I take it you want to allow for any length number, that might be followed by a colon and then a two digit value that resemble seconds (i.e. 0 – 59 being allowed.)

The key here is to make also the last two digits optional by using the quantifier operator ?.

One possible solution would therefore be to enable optional digits after the colon, confining them to 0 – 59, e.g.:

$('#duration').on('input', function() { 
    this.value = this.value.match(/^\d+\:?[0-5]?[0-9]?/); 
});

But again, it all pivots on what kind of values that are expected and allowed to be entered into the input field.