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
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.
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.