Extract a Number from a String in JavaScript

avatar

Borislav Hadzhiev

Last updated: Sep 6, 2022

banner

Photo from Unsplash

Extract a Number from a String in JavaScript #

Use the String.replace() method to extract a number from a string, e.g. str.replace(/\D/g, ''). The replace() method will extract a number from the string by replacing all non-digit characters with empty strings.

index.js
const str = 'hello 123 world'; const replaced = str.replace(/\D/g, ''); // 👉️ '123' console.log(replaced); let num; if (replaced !== '') { num = Number(replaced); // 👉️ 123 } console.log(num)

The replace method returns a new string containing all the numbers in the original string.

The first argument we passed to the String.replace method is a regular expression that we want to match in the string.

The \D character matches any character that is NOT a digit.

We added the g (global) flag to match all non-digit characters and replaced them with empty strings.

If the string only contains non-digit characters, we would replace all of them with empty strings and the String.replace method would return an empty string.

The if statement is there to check if the string contains any numbers.

If it doesn't, we don't want to convert an empty string to a number because that evaluates to 0.

index.js
console.log(Number('')); // 👉️ 0

Here is a complete example of the case where the string doesn't contain numbers.

index.js
const str = 'hello world'; const replaced = str.replace(/\D/g, ''); // 👉️ '' console.log(replaced); let num; if (replaced !== '') { // 👇️ never runs num = Number(replaced); } console.log(num); // 👉️ undefined

We replace all non-digit characters with empty strings, and because the string contains only non-digit characters, String.replace() returns an empty string.

Note that the String.replace method returns a new string, it doesn't mutate the original string. Strings are immutable in JavaScript.

Another commonly used approach, which I wouldn't recommend, is to use the String.match method.

index.js
const str = 'hello 123 world'; const replaced = str.match(/\d+/); // 👉️ ['123'] let num; if (replaced !== null) { num = Number(replaced[0]); // 👉️ 123 } console.log(num);

We passed a regular expression to the String.match method.

The \d character matches a digit from 0 to 9.

The + means match one or more of the preceding characters (the digits in the range 0-9).

The return value of the String.match method is confusing, but for our purposes, it returns an array containing the match.

If the String.match method doesn't match anything, it returns null.

The if statement is there to make sure we don't try to convert null to a number, which would return 0.

index.js
console.log(Number(null)); // 👉️ 0

Which approach you pick is a matter of personal preference. I find the approach using String.replace more direct and intuitive.

Here is an example of the case where the string contains no digits when using String.match().

index.js
const str = 'hello world'; const replaced = str.match(/\d+/); // 👉️ null let num; if (replaced !== null) { // 👇️ never runs num = replaced[0]; } console.log(num); // 👉️ undefined

The match method returns null because the string contains no digits.

Further Reading #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.