Convert a string like 4h53m12s to a total number of seconds in JavaScript

Question

At the moment I have this:

function getValue(str)
{
	let result = 0;
	
	var regex = /(\d+[a-z]+)/g;
	match = regex.exec(str);

	while (match != null) 
	{
		var match_str 	= match[0];
		var last_char 	= match_str[match_str.length-1];

		if ( last_char == 'h' )
			result += parseInt(match_str) * 3600;
		if ( last_char == 'm' )
			result += parseInt(match_str) * 60;
		if ( last_char == 's' )
			result += parseInt(match_str);

		match = regex.exec(str);
	}

	return result;
}

console.log( getValue("4h12m32s") );

It feels quite clumsy though. Also checking invalid values like 4hs feels difficult.

Is there any clever trick for something similar?

Answer 1

• getValue(str) is such a vague name for the function and its parameter, it could mean anything! Furthermore, "get" implies that this is a getter function that retrieves something, which is not the case.
• Your regex is ineffective. Capturing parentheses could be useful, but you didn't actually use them right, such that you ended up having to pass a dirty string to parseInt() and extract the last character the harder way.
• You neglected to scope match, such that it acts as a global variable. The regex-matching statement is written twice; the assignment could be done within the loop condition instead.
• The if statements should be an if-else chain, since the conditions are mutually exclusive. However, since the branches are all so similar, a lookup table would be more elegant.

function durationSeconds(timeExpr)
{
	var units = {'h': 3600, 'm': 60, 's': 1};
	var regex = /(\d+)([hms])/g;

	let seconds = 0;
	var match;
	while ((match = regex.exec(timeExpr))) 
	{
		seconds += parseInt(match[1]) * units[match[2]];
	}

	return seconds;
}

console.log( durationSeconds("4h12m32s") );

Alternatively, if you expect that the units will be in the conventional order, you don't have to loop at all.

function durationSeconds(timeExpr)
{
	var match = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(timeExpr);
	return 3600 * (parseInt(match[1]) || 0)
	       + 60 * (parseInt(match[2]) || 0)
	       +      (parseInt(match[3]) || 0);
}

console.log( durationSeconds("4h32s") );

Answer 2

Named Capture Groups

JavaScript RegExp has named capture groups that can make life a lot simpler when dealing with complicated RegExp. Combined with destructuring assignment you can extract the named hours minutes and seconds as follows.

function toSeconds(time) {
    const {groups: {h = 0, m = 0, s = 0}} = /(?<h>\d*)h(?<m>\d*)m(?<s>\d*)/i.exec(time);
    return h * 3.6e3 + m * 60 + s * 1;  // * 1 to coerce s to Number
}

Missing digits are set to zero in the assignment defaults.

However this is limited to strings that have hours, minutes, and seconds in the correct order (hence no need to match the "s") and will throw an error if there is a problem.

A more robust solution

You can also reduce the array created by symbol.matchAll (it returns an iterator that you convert to an array via spread operator)

It RegExp[symbol.matchAll] is the same call as String.matchAll(RegExp)

To handle as many variations as possible you can convert the time string to lowercase, soak up white spaces, allow for fractions, multiple periods, and negative periods.

Using an IIF to wrap the periods constant via closure the function looks like

const toSeconds = (() => {
    const periods = {h: 3600, m: 60, s: 1};
    return time => [.../(\-*\d*\.*\d*)\W*([hms])/g[Symbol.matchAll](time.toLowerCase())]
        .reduce((time, [, digits, type]) => periods[type] * digits + time, 0);
})();

Or via the string

const toSeconds = (() => {
    const periods = {h: 3600, m: 60, s: 1};
    return time => [...time.toLowerCase().matchAll(/(\-*\d*\.*\d*)\W*([hms])/g)]
        .reduce((time, [, digits, type]) => periods[type] * digits + time, 0);
})();

To combat the readability the next version creates some extra variables to segregate the logic parts a little

const toSeconds = (() => {
    const periods = {h: 3600, m: 60, s: 1};
    const extractHMS = /(\-*\d*\.*\d*)\W*([hms])/g;
    const sumSeconds = (time, [, digits, type]) => periods[type] * digits + time;

    return time => [...time.toLowerCase().matchAll(extractHMS)].reduce(sumSeconds, 0);
})();

The snippet below shows some of the results of a variety of inputs.

const toSeconds = (() => {
    const periods = {h: 3600, m: 60, s: 1};
    return time => [.../(\-*\d*\.*\d*)\W*([hms])/g[Symbol.matchAll](time.toLowerCase())]
        .reduce((time, [, digits, type]) =>periods[type] * digits + time, 0);
})();



"1h,1m,1s,1,,1s2m3h,3h2m1s,2H2M2S,1h 1H1s1 S1m1M,1.1s,1.2s,s,1h-5m,1 1s,hms"
    .split(",")
    .forEach(time => log("\"" + time + "\" =" , toSeconds(time)+" seconds"));
    
function log(...data) {
    document.body.appendChild(
        Object.assign(
            document.createElement("div"), {textContent: data.join(" ")}
        )
    )
}

BTW in Javascript we put...

• the opening { on the same line as the statement,
• use camelCase for naming.

And from many years of C style language experience I would advise you to always delimit statement blocks with { } eg Bad if (foo) bar = foo, Good if (foo) { bar = foo }

Answer 3

In addition:

• "Always specify a radix when using parseInt." -- MDN parseInt documentation
• When getValue() is given a malformed string, it ignores the malformed parts without letting anyone know something went wrong. For example, 2 h 500 m 600 s returns 0. It is better to throw an error when the input isn't valid (so the caller can more easily figure out why the values it got back are wrong).
• If you expect requirements to change in the future, you should look into harnessing the power of a real parser (or parser generator). For example, what changes do you need to do to:
  • Add support for uppercase letters: 1H2D3M
  • Allow spaces: 30h 50 m 10s
  • Allow input to be in any order: 5s 10m
  • Allow multiple occurrences or no occurrences of a unit: 30h 10h or 10s
  • Add new units: d (days) or ms (milliseconds), etc.

Here is what that looks like using a parser generator (PEG.js):

• Navigate to https://pegjs.org/online
• Paste the following into the grammar text area:

// Duration to Seconds Grammar
// ==========================
//
// Accepts expressions like "4h53m12s" or "4H 33M 12S" 
// and computes the total number of seconds.

start
  = total

total
  = left:subtotal right:total { return left + right; }
  / subtotal

subtotal
  = left:integer right:day { return left * 86400; }
  / left:integer right:hour { return left * 3600; }
  / left:integer right:minute { return left * 60; }
  / left:integer right:second { return left; }
  / left:integer right:millisecond { return left * .001; }

day
  = whitespace [dD]

hour
  = whitespace [hH]

minute
  = whitespace [mM][^sS]

second
  = whitespace [sS]

millisecond
  = whitespace [mM][sS]

integer
  = whitespace [0-9]+ { return parseInt(text(), 10); }

whitespace
  = [ \t\n\r]*

• Test it out in the right-hand pane
• Choose your options and click Download Parser