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

Tips for preserving login session continuity following page refresh in Vuejs

Exploring the functionality of Array.prototype.includes() in Angular 7 with PhantomJS testing

The use of asterisk (*) in importing dynamically

Tips for creating a responsive Youtube embedded video

Retrieving a result from a function call is a fundamental aspect of programming

"The orderBy function in AngularJS seems to be overlooked or not functioning properly within the

Recently updated to the latest versions of Angular, AngularCLI, and Rxjs (version 6), however encountering an error stating "Property 'take' does not exist on type 'Observable'"

Exploring the blend of HTTP requests and personalized promises in AngularJS through recursive functions

Saving a revised JSON file using AngularJS

When you try to remove an element from an array by its index in Vue JS, the outcome may not be

Prevent the creation of nested objects in Django Rest Framework

The web server is now serving Index.html instead of main.js for AngularJS 2

transforming basic pagination using javascript to jquery implementation

Merge nested arrays while eliminating any redundant elements

Use JavaScript to add a div element to the page ten times every time the button is clicked

Guide to deactivating an input field in an angular js smart search dropdown

Adding the API JSON response to the MetaInfo in Vue.js

The error "Unable to create an instance of mssql.Schema" indicates that the

Managing Server Crashes in Node.js

Angular is the best method for properly loading a webpage