Remove all non-numeric characters from String in JavaScript

# Table of Contents

1. Remove all non-numeric characters from String in JavaScript
2. Leaving dots in the result to preserve floating-point numbers
3. Taking negative numbers into account
4. Handling multiple dots in the string

# Remove all non-numeric characters from String in JavaScript

Use the String.replace() method to remove all non-numeric characters from a string.

The String.replace() method will remove all characters except the numbers in the string by replacing them with empty strings.

Copied!
const str = 'bobby 123 !@#$%^hadz?456._com';

const result = str.replace(/\D/g, '');
console.log(result); // 👉️ 123456

The first argument we passed to the String.replace() method is a regular expression.

The forward slashes / / mark the beginning and end of the regular expression.

Copied!
const str = 'bobby 123 !@#$%^hadz?456._com';

const result = str.replace(/\D/g, '');

The \D character matches all non-digit characters.

The second argument we passed to the String.replace() method is the replacement for each match.

We used an empty string as the replacement to remove all non-numeric characters from the string.

Copied!
const str = 'bobby 123 !@#$%^hadz?456._com';

const result = str.replace(/\D/g, '');
console.log(result); // 👉️ 123456

We replace all non-digit characters with an empty string to remove them from the string.

# Using a character class instead of the \D special character

You can also use a character class containing a range of digits to achieve the same result.

Copied!
const str = 'bobby 123 !@#$%^hadz?456._com';

const result = str.replace(/[^0-9]/g, '');

console.log(result); // 👉️ 123456

The square brackets [] are called a character class and match the digits in the range.

When a caret ^ is used at the beginning of a character class, it means "Not the following".

In other words, match anything but the digits in the range from 0 to 9 and remove the matches.

This wouldn't work if you have floating-point numbers in your string because the dots . would also get stripped.

# Leaving dots in the result to preserve floating-point numbers

If you want to leave dots in the result to try to preserve floating-point numbers, use the following regular expression.

Copied!
const str = 'bobby 123 !@#$%^hadz?.456_com';

const result = str.replace(/[^\d.]/g, '');
console.log(result); // 👉️ 123.456

The forward slashes / / mark the beginning and end of the regular expression.

The part between the square brackets [] is called a character class and matches everything except for digits and dots.

The caret ^ symbol in the regex means "NOT the following".

We match all non-digits or dots in the example.

As previously noted, things can go wrong if multiple dots exist in the string or a dot is at the wrong place.

# Taking negative numbers into account

If you need to take negative numbers into account, slightly tweak the regular expression.

Copied!
const str = '-bobby 123 !@#$%^hadz?.456_com';

const result = str.replace(/[^\d.-]/g, '');
console.log(result); // 👉️ -123.456

Notice that we added a minus sign - at the end of the character class.

# Handling multiple dots in the string

If you need to handle multiple dots in the string, use the parseFloat() function on the result.

Copied!
const str = '-124.45.67 $';

const result = parseFloat(str.replace(/[^\d.-]/g, ''));

console.log(result); // 👉️ -124.45

We used the same regular expression to remove all non-numeric characters from the string.

The last step is to use the parseFloat() function to remove the part after the second period.

Copied!
const str = '-124.45.67 $';

// 👇️ -124.45.67
console.log(str.replace(/[^\d.-]/g, ''));

const result = parseFloat(str.replace(/[^\d.-]/g, ''));
console.log(result); // 👉️ -124.45

The parseFloat() function takes a string as a parameter, parses the string and returns a floating-point number.

Copied!
const str1 = '123.456abc';
console.log(parseFloat(str1)); // 👉️ 123.456

const str2 = '88.123bc';
console.log(parseFloat(str2)); // 👉️ 88.123

As with parseInt(), the parseFloat() method ignores the non-numeric characters at the end of the string.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Replace/Remove all Numbers in a String using JavaScript
• Remove the leading Zeros from a String in JavaScript
• Remove all non-alphanumeric Characters from a String in JS