Experimenting with a custom AngularJS filter designed to extract numerical values from a chunk of text

Question

Experimenting with a custom AngularJS filter designed to extract numerical values from a chunk of text

I am working on creating a unique filter that can extract numbers from text input into a text box. For example:

User enters: The cat went to 4 stores and bought 3 bags of cat litter for 1 dollar.

The desired output would be: [4, 3, 1]

This filter works by analyzing the previously filtered array ['the', 'cat', 'went', 'to', '4' ...]

My approach involves utilizing a for loop to iterate through the array and identify numerical values. However, uncommenting the for loop causes issues within the application. Any suggestions or assistance would be greatly appreciated.

filter('showNum', function() {    
//   this filter is not complete but it will return only numbers from an array
    return function isNumeric(title){
    var numbers, i, len, numberToAdd;
    numbers = [];
    len = title.length;

//      for(i=0; i<len; i+=1){
//          numberToAdd = title[i]; 
//          if(!isNAN(numberToAdd)===False);    {numbers.push(numberToAdd);} 
    return numbers;
      };

  })

javascript angularjs

Answer 1

Answer №1

If I were to modify the filter, it would look something similar to this example:

javascript

.filter('showNumbers', function() {
  return function(input) {

    if (!input)
    {
      return [];
    }

    return input
      .split(' ')
      .filter(function(item){
        return item && !isNaN(item);
      })
      .map(function(item){
        return parseInt(item);
      })
    
  };
});

html

  <body ng-controller="MainCtrl">
    <input type="text" ng-model="input">
    <p>result: {{ input | showNumbers }}</p>
  </body>

http://example.com/filter

Answer 2

If I were to modify the filter, it would look something similar to this example:

javascript

.filter('showNumbers', function() {
  return function(input) {

    if (!input)
    {
      return [];
    }

    return input
      .split(' ')
      .filter(function(item){
        return item && !isNaN(item);
      })
      .map(function(item){
        return parseInt(item);
      })
    
  };
});

html

  <body ng-controller="MainCtrl">
    <input type="text" ng-model="input">
    <p>result: {{ input | showNumbers }}</p>
  </body>

http://example.com/filter

Answer 3

Answer №2

It seems like wZVanG provided a helpful solution for your function by incorporating regular expressions while maintaining the signature of the filter to ensure it returns an array of integers and accepts an array as input.

 filter('showNum', function() {    
    //This filter extracts numbers from an array
        return function extractNumbers(input){
        var numArray = [];
        var stringArr = input.toString();

        var numberStrings = stringArr.match(/\b\d+\b/g);

       numberStrings.forEach(function(str){
           numArray.push(parseInt(str));
       });

       return numArray;

 })

Answer 4

It seems like wZVanG provided a helpful solution for your function by incorporating regular expressions while maintaining the signature of the filter to ensure it returns an array of integers and accepts an array as input.

 filter('showNum', function() {    
    //This filter extracts numbers from an array
        return function extractNumbers(input){
        var numArray = [];
        var stringArr = input.toString();

        var numberStrings = stringArr.match(/\b\d+\b/g);

       numberStrings.forEach(function(str){
           numArray.push(parseInt(str));
       });

       return numArray;

 })

Experimenting with a custom AngularJS filter designed to extract numerical values from a chunk of text

Answer №1

http://example.com/filter

Answer №2

Similar questions

Converting a string into a regular expression using JavaScript

What could be the reason for the variable not resetting in my event handler?

Is it possible to adjust the center of rotation in THREE.js TrackballControls so that it is not located at the center of the canvas

Keeping data external to promises in protractor

I am constantly reminded by React hooks to include all dependencies

Using AJAX to connect the JSP page with the Servlet's doGet() function for interaction

TreeView Filtering

What is the best way to retrieve seat number upon clicking in React Native?

Type of Data for Material UI's Selection Component

Ways to reveal concealed div elements when hovering the mouse?

Is it possible to have the front-facing photo in expo-camera stay mirrored?

Traverse through the loop with React Material UI in JavaScript

Vue Router generates a URL containing %2F when dealing with slug routes

Express and Webpack Error: "SyntaxError: Unexpected token <"

Encountering difficulties when attempting to inject NotifierService into an Angular Service

Running JavaScript code on a webpage using Selenium

Troubleshooting problems with data binding in Angular Ionic

Leveraging the browser's console for transmitting AJAX data

Running Grunt task after saving in NetBeans 8.0 - A step-by-step guide

Trouble with AngularJS Smart Table when dealing with live data streams