Skip to content

Apologies for the appearance of the site. I'm designing in public!

A series of digits

Numberize a value

Published on Thursday, 4 March 2021.
At 382 words, this article should take about 2 minutes to read.
This article is more than 2 years old.

If you get a CSS value but you want to do maths with it, what do you do?

const width = window.getComputedStyle(document.body, null).getPropertyValue('width'); // 960px = (width / 2); // NaN

Oh noes! 😖

I guess we could use the CSS calc() syntax… = `calc(${width} / 2)`; // <body style="width: calc(960px / 2);">

This is all well and good for simple calculations like that but what happens when we start getting spicy?

const padding = window.getComputedStyle(document.body, null).getPropertyValue('padding'); // 8px
const margin = window.getComputedStyle(document.body, null).getPropertyValue('margin'); // 32px = `calc(calc(${width} / 2) + calc(${padding} + calc(${margin} * 0.5))`; // <body style="width: calc(calc(960px / 2) + calc(8px + calc(32px * 0.5)));">

Ew! Gross! 🤮

What you actually want is to be able to treat that string like a real number, right?

Make that string an integer

A fun quirk/feature of JavaScript is that parseInt() and parseFloat() can be used on any string that starts with a number and it will just magically work! = (parseInt(width, 10) / 2) + (parseInt(margin, 10) * 0.5) + parseInt(padding, 10) + 'px'; // <body style="width: 504px;">

The magic here is JavaScript's Type Inference - it's doing a lot of the heavy lifting in assuming that - because you're "parsing an integer" - the string passed is an integer.

Again, this works but I, for one, don't like things to run off assumptions. And, no, rewriting the application in TypeScript isn't going to happen, Reply Guy!

Make that string definitely an integer

If you just want the code, here you are…

const numberizeValue = (input) => parseFloat(input.split('').filter(x => !x.match(/[0-9.]/g)).join(''), 10);

Now, let's break that down!

Firstly, we're going to use parseFloat() because it will allow us to "numberize" numbers with decimal places. We're going to assume our numbers are decimal and return the result using Base 10.

Next, we explode the provided string into an array with input.split(''). The use of '' gives us an array of individual characters.

We can now filter the array to remove any characters that are not numbers using .filter(x => !x.match(/[0-9.]/g). The RegEx in the match function is looking for decimal numbers between 0 and 9, and the full-stop/period character.

Now the array has been stripped of letters and (most) punctuation, we can join the array back into a string to be parsed.

numberizePixels examples


Cover image courtesy of Mika Baumeister.


In almost all cases, the comments section is a vile cesspool of Reply Guys, racists, and bots.

I don't want to have to deal with that kind of hell so I don't have a comments section.

If you want to continue the conversation, you can always hit me up on Mastodon (which is not a vile cesspool of Reply Guys, racists, and bots).

onward-journeys module