Введите две цифры от 0 до 59 после ":"

Question

Я хочу ввести после: значение от 0 до 59 макс. Например:

350:59
20:22

Этот код работает, но максимум после: 99

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

Answer 1

Добро пожаловать в StackOverflow:)

Как я уже говорил в комментариях, вы можете указать, каких символов вы ожидаете, если вы скажете, что от 00 до 59, вы можете легко указать его

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

• \d{1,} начинается с десятичного числа [0-9], которое может содержать 1 или более символов
• \:, за которым следует :
• [0-5] следует за di git должно быть от 0 до 5
• [0-9] следует за di git должно быть от 0 до 9

живой пример https://regex101.com/r/9Zq1Lm/1

---

Вы также можете скопировать, вставить приведенный ниже код и выполнить в консоли браузера

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

Для значений, вводимых символ за символом, попробуйте следующее:

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

Фон

Этот тип настройки будет сильно зависеть от того, какой тип ввода что ожидается, и как вводится входное значение. Т.е., если он вводится, вставляется целиком или вставляется функцией.

Ваше текущее решение основывается на том факте, что мы можем сразу же присвоить результат функции match() в качестве значения поля ввода.

Функция String.prototype.match () вернет следующее:

An Array, содержимое которого зависит от наличия или отсутствия глобального (g) флаг или null, если совпадений не найдено.

Рассмотрим ввод "42:100"

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

match() и возвращает:

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

, который мы немедленно назначаем обратно в поле ввода. Он решит отобразить первый элемент в этом массиве, то есть "42:10".

Если match() не найдет соответствующий шаблон, он вернет null и поле ввода станет пустым.

Возможное решение

Итак, с этой информацией мы теперь знаем, что если человек печатает значение по одному символу за раз , важно, чтобы регулярное выражение всегда могло соответствовать ожидаемому шаблон , для каждого допустимого входного значения, так что оно, в свою очередь, может быть назначено обратно в поле ввода.

Исходное регулярное выражение, которое я понимаю, вы хотите разрешить для любого числа длины, которое может быть за ним следует двоеточие, а затем значение двух di git, которое напоминает секунды (т. е. допускается 0 - 59).

Ключом здесь является также сделать последние две цифры необязательными, используя оператор квантификатора ?.

Таким образом, одним из возможных решений было бы включение необязательных цифр после двоеточия, ограничивая их значениями 0 - 59, например:

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

Но, опять же, все сводится к тому, какой род d значений, которые ожидаются и могут быть введены в поле ввода.