Extract a Number from a String in JavaScript

In this guide, we will learn how to extract numbers and decimal numbers from a string.

We will be using the following methods:

• Using the match() method
• Using the replace() method

Important: Using the match() method to extract a number from a string is a lot safer than using replace() method. We will discuss this later in the guide.

Using the match() method

To extract numbers from a string using the match() method, we have to pass the regular expression /\d+/g as the argument. The match() method returns an array containing all the numbers.

For example:

var str = "iPhone 14 Pro is better than iPhone 13 Pro";

var matchedArr = str.match(/\d+/g);

console.log(matchedArr);      // Output: ['14', '13']
console.log(matchedArr[0]);   // Output: 14
console.log(matchedArr[1]);   // Output: 13

Let’s break down the regular expression /\d+/g

Forward slashes / mark the beginning and the end of the regular expression.

\d Matches decimal numbers 0-9.

+ Matches the previous character one or more times. In our example /\d+/g matches ‘14’ and ‘13’. If we didn’t have included + then /\d/g would match all the digits ‘1’, ‘4’, ‘1’, and ‘3’ individually which works fine anyway.

g Global flag g matches all the occurrences of the match, not just the first occurrence of the match. If we didn’t include g in the above example then /d+/ would match only ‘14’. It stops after the first match.

Extracting decimal numbers from a string using the match() method

To extract decimal numbers from a string using the match() method, we have to pass the regular expression /\d+\.?\d+/g as the argument. The match() method returns an array containing all the decimal numbers and integers.

For example:

var str = "iOS 16.3 is a lot smoother than iOS 16.1 in iPhone 14 Pro";

var matchedArr = str.match(/\d+\.?\d+/g);

console.log(matchedArr);      // Output: ['16.3', '16.1’, ‘14’]
console.log(matchedArr[0]);   // Output: 16.3
console.log(matchedArr[1]);   // Output: 16.1
console.log(matchedArr[2]);   // Output: 14

Let’s break down the regular expression /\d+\.?\d+/g

First Part	Middle Part	Last Part
\d+	\.?	\d+

The logic to extract the decimal numbers from a string is we need to look out for the decimal point (period) as the point of reference.

So let’s discuss the middle part first.

Middle Part \.?

We wanted to capture the literal decimal point (period). So we have to escape it by using a backward slash. Thus we write \.

? Matches zero or one previous character.

In our example, ? after the decimal point (period) means there could be one decimal point (period) or no decimal point at all.

In the above example, I have made the decimal point optional by using the ? after the decimal point because I want to capture numbers even if it has no decimal point (like 22, 55, and 777).

If you want to capture only numbers with a decimal point then just remove the question mark ? after the decimal point and you are good to go.

For example:  \.

First part and last part \d+

\d Matches decimal numbers 0-9.

+ Matches the previous character one or more times.

In our example, \d+ before and after the decimal point (period) means there must at least one digit (could be more) before and after the decimal point if there is a decimal point.

Using the replace() method

To extract numbers from a string using the replace() method, we have to pass a regular expression /\D+/g as the search value and empty string '' as the replacement value.

 The replace() method searches for the search value and replaces the matched substring with the replacement value i.e. empty string in our case. Thus giving us a new string with numbers only.

For example:

var str = "noobmaster69pro";

var replaced = str.replace(/\D+/g, '');

console.log(replaced);   // 69

Let’s breakdown the regular expression /\D+/g

Forward slashes / mark the beginning and the end of the regular expression.

\D Matches a non-digit character i.e. any character other than numbers 0-9.

+ Matches the previous element one or more times. In our example /\D+/g matches ‘noobmaster‘ and ‘pro’ in “noobmaster69pro”.  If we didn’t have +. E.g. /\D/g then it would match non-digits ‘n’, ‘o’, ‘o’, ‘b’, ‘m’, ‘a’, ‘s’, ‘t’, ‘e’, ‘r’, ‘p’, ‘r’, ‘o’ individually which works fine anyway.

g Global flag g matches all the occurrences of the matches, not just the first occurrence of the match. In our example, matches all one or more non-digit characters as much as possible. In our example above, /\D+/g matches ‘noobmaster‘ and ‘pro’.

If we don’t include the global flag g then only the first one or more non-digits characters will be matched.

E.g. /\D+/ matches ‘noobmaster’ in ‘noobmaster69pro’ and it stops after the first match.

Important: If you have two or more numbers in a string and if you try to extract it using the replace() method then you will get a new string with all the numbers combined. If that is what you want then it’s completely fine.

Let’s take a look at the example:

var str = "noobmaster69pro45too";

var replaced = str.replace(/\D+/g, '');

console.log(replaced);   // 6945

Extracting decimal point numbers from a string using replace() method

To extract decimal point numbers from a string using replace() method, we have to pass the regular expression /\D+\.?\D+/g as the search value and empty string '' as the replacement value. The replace() method returns a new string with decimal point numbers.

For example:

var str = "iOS 16.3 update";

var replaced = str.replace(/\D+\.?\D+/g, '');

console.log(replaced);   // 16.3

Let’s break down the regular expression /\D+\.?\D+/g

First Part	Middle Part	Last Part
\D+	\.?	\D+

The logic to extract decimal numbers from a string using replace() method is we replace all the non-decimal characters before and after the decimal point (period) with an empty string thus giving us a new string with decimal numbers (and integers).

Forward slashes / mark the beginning and end of the regular expression.

First and Last Part \D+

\D Matches a non-digit character i.e. any character other than numbers 0-9.

+ Matches the previous element one or more times. In our example, \D+ matches all the non-digit characters before and after the decimal point (period).

Middle Part \.?

\. Matches literal decimal point (period).

? Matches previous character zero or one time. In our example, ? after the decimal point (period) means the decimal point is optional. Meaning there could be one decimal point or no decimal point at all. I did this to match a number even if it has no decimal point (numbers like 55, 38, and 99).

Alternative Method:

We can also extract decimal numbers from a string by passing a regular expression /^\D+|\D+$/g as the search value and an empty string '' as the replacement value.

For example:

var str = "iOS 16.3 update";

var replaced = str.replace(/^\D+|\D+$/g, '');

console.log(replaced);   // 16.3

Let’s break down the regular expression /^\D+|\D+$/g

The logic is we are replacing the non-digit characters from the beginning and the end of the string with an empty string.

^ Anchors the regular expression to the beginning of the string.

\D Matches a non-digit character i.e. any character other than numbers 0-9.

+ Matches the previous element one or more times. In our example, ^\D+ matches all the non-digit characters from the beginning of the string.

| Logical OR operator

\D Matches a non-digit character i.e. any character other than numbers 0-9.

+ Matches the previous element one or more times. In our example, \D+$ matches all the non-digit characters from the end of the string. 

$ Anchors the regular expression to the end of the string.

Important:  If you have two or more numbers in a string and if you try to extract it using the replace() method then you may get an unexpected result.

var str = "iOS 16.3 is a lot better than iOS 16.1 when it comes to smoothness";

var matched = str.replace(/\D+\.?\D+/g, '');
var matchedTwo = str.replace(/^\D+|\D+$/g, '');

console.log(matched);      // Output: 16.316.1
console.log(matchedTwo);   // Output: 16.3 is a lot better than iOS 16.1