1. String replace() Method
To extract a number from a string in JavaScript, call the replace() method on the string with a regex to replace all the non-digit characters in the original string. For example:
const str = 'The number 345 has three digits';
const replaced = str.replace(/\D/g, '');
console.log(replaced); // 345
The String replace() method returns a new string with the matches of a pattern replaced by a replacement. We pass a regular expression that matches all the non-digit characters so that we can replace them with an empty string ('') to remove them.
The \D regex metacharacter matches any non-digit characters in a string.
The g (global) flag specifies that every occurrence of a non-digit character in the string should be matched by the regex.
If we don’t pass the global flag, only the first non-digit character in the input string will be matched and replaced:
const str = 'The number 345 has three digits';
// No 'g' flag in regex
const replaced = str.replace(/\D/, '');
console.log(replaced); // he number 345 has three digits
2. String match() Method
To extract a number from a string, we can also call the match() method on the string, passing a regex that matches a consecutive sequence of digits. For example:
const str = 'The number 345 has three digits';
const matches = str.match(/\d+/);
const numStr = matches[0];
console.log(numStr); // 345
The String match() method matches a string against a regular expression and returns the results. In our case, the matched number is the first item of the array, so we access the 0 property with bracket notation to get it.
The \d metacharacter is used to find a digit in a string. We add the + to \d in order to find a consecutive sequence of digits.
This second method is better when trying to extract each number in the string separately, as it treats a consecutive sequence of digits as a separate match. To extract each number separately, we’ll need to add the g flag:
const str = 'The numbers 345 and 847 have three digits';
const matches = str.match(/\d+/g);
console.log(matches); // [ '345', '847' ]
Note
When no digits can be found, the match() method will return null:
const str = 'There are no numbers in this string';
const matches = str.match(/\d+/g);
console.log(matches); // null
Every Crazy Thing JavaScript Does
A captivating guide to the subtle caveats and lesser-known parts of JavaScript.
Ayibatari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.
