Конвертировать метку времени в описании видео для ссылки

Question

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

function timestampify(text) {
    return text.replace(/\d+$/, '', '<a data-time="$1" class="timestamp-link">$1</a>')
}
/*
Music used:
0:00 - Rhythm Heaven - Rhythm Calligraphy
1:46 - Mario Party 6 - Night at the Garage
3:00 - POKEMON: Super Mystery Dungeon - Onward, Expedition Society!
36:10 - Mario Party 9 - DK's Jungle Ruins
47:23 - Rhythm Heaven - Rhythm Calligraphy
01:03:23 - Rhythm Heaven Fever: Prologues - Power Calligraphy Prologue
*/

Answer 1

Если бы мы не проверяли наши временные метки, возможно, это выражение могло бы просто работать:

\s*(\d{1,2}:\d{2}(?::\d{2})?)\s+

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

const regex = /\s*(\d{1,2}:\d{2}(?::\d{2})?)\s+/gm;
const str = `0:00 - Rhythm Heaven - Rhythm Calligraphy
11:46 - Mario Party 6 - Night at the Garage
23:00 - POKEMON: Super Mystery Dungeon - Onward, Expedition Society!
  36:10 - Mario Party 9 - DK's Jungle Ruins
47:23 - Rhythm Heaven - Rhythm Calligraphy
01:03:23 - Rhythm Heaven Fever: Prologues - Power Calligraphy Prologue
   01:03:23 - Rhythm Heaven Fever: Prologues - Power Calligraphy Prologue`;
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

Чтобы убедиться, что значение представляет время, я бы использовал что-то вроде этого:

/^[0-5]?\d(?::[0-5]?\d){1,2}/gm

Regex demo .

Разбивка:

^             # The beginning of the string/line.
[0-5]?        # And optional number between 0 and 5.
\d            # Any digit.
(?:           # The start of a non-capturing group.
    :         # Matches the character ":" literally.
    [0-5]?\d  # Any digit, optionally preceded by a number between 0 and 5.
)             # The end of the non-capturing group.
{1,2}         # Match between one and two times of the previous group (`ss` or `mm:ss`).

Пример JavaScript:

function timestampify(text) {
    return text.replace(/^[0-5]?\d(?::[0-5]?\d){1,2}/gm, '<a data-time="$&" class="timestamp-link">$&</a>')
}

var text = `
0:00 - Rhythm Heaven - Rhythm Calligraphy
1:46 - Mario Party 6 - Night at the Garage
3:00 - POKEMON: Super Mystery Dungeon - Onward, Expedition Society!
36:10 - Mario Party 9 - DK's Jungle Ruins
47:23 - Rhythm Heaven - Rhythm Calligraphy
01:03:23 - Rhythm Heaven Fever: Prologues - Power Calligraphy Prologue
`

console.log(timestampify(text))