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
11 Amazing New JavaScript Features in ES13
This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.
