Having problems with the RegExp for Timecode Validation

Ask the community
, ,
1

I’m trying to make a timecode validation for videos for up to 4 hours, 59min, 59 sec. I’ve made a public .js called timecode.js but the code keeps saying my timecode is wrong (even though the console shows otherwise).

export function timecodeCheck(inputTimecode) {
    const timecodeLongRegEx = RegExp('^([0][0-4]):([0-5][0-9]):([0-5][0-9])$'); // includes HH:MM:SS
    const timecodeShortRegEx = RegExp('^([0-5][0-9]):([0-5][0-9])$'); // includes 0 or is >10 minutes
    const timecodeSuperShortRegEx = RegExp('^[0-9]:([0-5][0-9])$'); // less than 10 minutes
    let outputTimecode = "";

    console.log("inputTimecode:  ", inputTimecode);
    if (inputTimecode === timecodeLongRegEx) {
        console.log("long timecode entered", inputTimecode)
        let outputTimecode = inputTimecode
        console.log("Input Timecode fits Long RegEx", inputTimecode);
    } else if (inputTimecode === timecodeShortRegEx) {
        console.log("short timecode entered", inputTimecode)
        let outputTimecode = "00:" + inputTimecode
        console.log("Input Timecode fitted Short RegEx, now is", inputTimecode);
    } else if (inputTimecode === timecodeSuperShortRegEx) {
        console.log("supershort timecode entered", inputTimecode)
        let outputTimecode = "00:0" + inputTimecode;
        console.log("Input Timecode fitted SuperShort RegEx, now is", inputTimecode);
    } else {
        outputTimecode = "Timecode is incorrect, use HH:MM:SS";
    };

    console.log("outputTimecode is :", outputTimecode);
 //   return timecodeCheck(outputTimecode);
}

I get the timecode string as I wrote it, in the inputTimecode from the function call. Unfortunately, even if I use a timecode like 01:22:34 , fully proper and less than 04:59:59, I still get to the ‘else’ statement

Working in
e.g. Wix Editor, Dev Mode

I’m using the timecodeCheck function to determine 1) if the user put in a valid timecode and 2) to correct a short (mm:ss or m:ss) timecode to hh:mm:ss and return it to the text box.

@CODE-NINJA - I see you are all over Regular Expressions. Mind helping me out?

const timecodeLongRegEx = RegExp('^([0][0-4]):([0-5][0-9]):([0-5][0-9])$'); // includes HH:MM:SS
    const timecodeShortRegEx = RegExp('^([0-5][0-9]):([0-5][0-9])$'); // includes 0 or is >10 minutes
    const timecodeSuperShortRegEx = RegExp('^[0-9]:([0-5][0-9])$'); // less than 10 minutes

Thank you!

2

With help, figured out that the If statements were incorrect and needed to use .test() instead to get the correct answers and not the ===.

Solved

3

Thanks for taking the time to loop around with the solution @James_Brangan! And glad you found the .test()

Beyond that, I did notice one or two other things that might help with managing the code going forward.

export function timecodeCheck(inputTimecode) {
    // Regex patterns
    const longRegEx = /^([0][0-4]):([0-5][0-9]):([0-5][0-9])$/; // HH:MM:SS
    const shortRegEx = /^([0-5][0-9]):([0-5][0-9])$/; // MM:SS
    const superShortRegEx = /^([0-9]):([0-5][0-9])$/; // M:SS

    let outputTimecode = "";

    // 1. Use .test() to check the strings
    if (longRegEx.test(inputTimecode)) {
        outputTimecode = inputTimecode;
    } else if (shortRegEx.test(inputTimecode)) {
        // 2. Removed 'let' here to update the original variable (avoiding shadowing)
        outputTimecode = "00:" + inputTimecode;
    } else if (superShortRegEx.test(inputTimecode)) {
        outputTimecode = "00:0" + inputTimecode;
    } else {
        outputTimecode = "Timecode is incorrect, use HH:MM:SS";
    }

    // 3. Return the actual string result
    return outputTimecode;
}

Fixes:

  • Variable Shadowing: In your original code, you used let outputTimecode inside the if blocks. This created a new, temporary variable that disappeared as soon as the block ended. Removing let inside the blocks ensures the main outputTimecode is updated.
  • Method Correction: Replaced === with .test().
  • Removed Recursion: In your commented-out return, you were calling the function again. I changed it to simply return outputTimecode.
  • Regex Literals: Switched to /.../ syntax, which is the standard way to write Regex in JS for better readability.
4

Hi Noah,

Thanks for the help. I ended up writing “return” statements into the if/else statements and that solved the localized/temporary “let” (which I have been confused about for a while). It would be really nice if there was a cheat sheet on Velo/js operators that, in 1 sentence, described choices and their differences. let, const, just = or === and things like literals ‘ or “ or / or : - all these choices and more.

I’ve managed to get the timecode working (the timecodeLongRegEx is only for less than 5 hours since our videos are usually less than 3 - so will accept 04:59:59 - just in case).

For completeness, I did add a fix for users who wrote h:mm:ss that adds a 0 to the front making hh:mm:ss.

I appreciate the help @noahlovell and thanks for explaining the temporary variable and the better solution.