Extract numbers from a string-Javascript

Question

Consider the following string in javascript:

var string="border-radius:90px 20px 30px 40px";

I want to extract the 4 numbers from that string and store them in an array called numbers.To do that I developed the following code:

var numbers=string.split("border-radius:");
numbers=numbers[1].split("px");

This code is working fine but I was wondering if there is a better approach/solution.Any ideas are welcomed

Answer 1

I used the following regexp to extract numbers from a string:

var string = "border-radius:10px 20px 30px 40px";
var numbers = string.match(/\d+/g).map(Number);

Answer 2

The code will fail in below cases:

1. Negative numbers
2. Decimal numbers
3. Units other than px(e.g. pt, %, vw, vh, ...)

Moreover, the numbers array contains space before numbers and an empty string at the end which is not required.

---

I recommend to use below regex to extract numbers from strings

/[+-]?\d+(?:\.\d+)?/g

1. [+-]?: Optional + or - sign before number
2. \d+: Match one or more numbers
3. (?:\.\d+)?: Optional decimal point. ?: denotes non-capturing group.
4. g flag: To get all matches

After the numbers are extracted from string, they can be converted to Number format.

var regex = /[+-]?\d+(?:\.\d+)?/g;

var str = `padding: 0;
font-size: 16pt;
width: 50%;
height: 20vh;
margin-right: 12px;
padding-right: -12.5px;`;

var match;
while (match = regex.exec(str)) {
  console.log(match[0]);
}

Here's online demo of the regex on Regex101.