# 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);   // Output: 14
console.log(matchedArr);   // 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);   // Output: 16.3
console.log(matchedArr);   // Output: 16.1
console.log(matchedArr);   // Output: 14``````

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

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`

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``````