How to Extract Numbers from an Array mixed with Strings using JavaScript

share link

by Abdul Rawoof A R dot icon Updated: Feb 11, 2024

technology logo
technology logo

Guide Kit Guide Kit  

Arrays in JavaScript are a collection of multiple values under one name. Each value has an index which we use to traverse the array. Strings in JavaScript are a collection of characters inside quotes.

Strings can be empty. Suppose we have an array with strings and numbers and must extract numbers from the array by copying them into another array. For this purpose, we can use the filter () method.  

  • Filter (): This method creates a new array based on the condition applied. The elements of the new array include all the elements for which the given condition is true. 

We can use the typeof method, which returns the data type of an element. For this case, we can create a function that traverses through the array and checks whether the given element on each index is a number. The function will return a ‘number if the element is a number.’ And then, we can use filter () and create a new array with all the numerical values. 

Here is an example of how to extract numbers from an array mixed with strings using JavaScript;

Fig 1: Preview of the output that you will get on running this code from your IDE.



Follow the steps carefully to get the output easily.

  1. Install the Node.js and React on your IDE(preferable Visual Studio Code).
  2. Create React Application using npx create-react-app foldername.
  3. cd foldername.
  4. Open the folder in IDE.
  5. Copy the code using "copy" button above and paste it in app.js file(remove the earlier code from app.js).
  6. Remove first two lines of code after pasting the code in the app.js file.
  7. Open the terminal from IDE.
  8. npm start to run the file and check console for the output.

I hope you found this useful.

I found this code snippet by searching for 'how to extract numbers from array mixed string using JavaScript' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in Visual Studio Code 1.73.1.
  2. The solution is tested on node v18.12.1 and npm v8.19.2.

Using this solution, we are able to extract numbers from array mixed strings using javascript with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to extract numbers from array mixed strings using javascript.


1. How can I extract numbers from an array mixed with strings in JavaScript?

The approach is to use a combination of array methods. It's like filter () and parseInt() or regular expressions to filter out the numbers from the array.

2. How do I filter out non-numeric values from an array?

It can use the filter () method along with a callback function to remove non-numeric values of an array. Inside the callback function, you can use the isNaN() function to check if a value is not a number.

3. Can I use regular expressions to extract numbers from strings in an array?

Yes, regular expressions are a powerful tool for extracting specific patterns from strings. You can use the match () method along with a regular expression pattern to extract numbers.

4. Is there a performance difference between using regular expressions and array methods for extracting numbers?

It depends on the size of the array and the complexity of the regular expression pattern. Simple array methods like filter () and parseInt() may be more efficient for small arrays. The regular expressions may offer better performance for larger arrays or more complex ones.

5. How do I handle negative numbers or decimal numbers in the array?

It can change your regular expression to account for negative numbers or decimals. If they are present in the array.

For example: It can use /\-? \d+(\.\d+)? /g to match negative and decimal numbers.


  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page.