DEV Community

loading...
Cover image for Numberize a value

Numberize a value

thomasxbanks profile image Thomas Banks Originally published at thomasxbanks.com on ・2 min read

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
document.body.style.width = (width / 2); // NaN
Enter fullscreen mode Exit fullscreen mode

Oh noes! 😖

I guess we could use the CSS calc() syntax…

document.body.style.width = `calc(${width} / 2)`; // <body style="width: calc(960px / 2);">
Enter fullscreen mode Exit fullscreen mode

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
document.body.style.width = `calc(calc(${width} / 2) + calc(${padding} + calc(${margin} * 0.5))`;  // <body style="width: calc(calc(960px / 2) + calc(8px + calc(32px * 0.5)));">
Enter fullscreen mode Exit fullscreen mode

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!

document.body.style.width = (parseInt(width, 10) / 2) + (parseInt(margin, 10) * 0.5) + parseInt(padding, 10) + 'px'; // <body style="width: 504px;">
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

Forem Open with the Forem app