How to add regEx in angular filter

Question

From the above example, I have created a simple form with filter option using angular.

As far as the filter concern, it's a default filter which is provided by angular. Currently, when I search the text "br", it shows the id 1 and 10.

I would like to add the regEx in the search input.The search can be done using regEx.

what I need is, The search item can be

"br" => It show two data,
"b*" => Show all the data starts with b.
"*" => All the data
"*br" => All the data ends with br.

The above search should show the relevant data as per the search input.

scripts.js

var app = angular.module('app',[]);

app.controller('regEx', function($scope, $http) {
  $scope.init = function() {
    $http.get('https://jsonplaceholder.typicode.com/users/').success(function(data) {
      $scope.data = data;
      console.log(data);
    }).error(function(e) {
      console.log(e);
    });
  }

index.html

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="regEx" class="container">
    <h1>RegEx in Angular search</h1>
    <input type="text" class="form-control" ng-model="search" autofocus>
    <br />
    <table ng-init="init()" class="table table-bordered animated fadeIn">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Phone Number</th>
          <th>username</th>
          <th>website</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="d in data | filter:search">
          <td>{{d.id}}</td>
          <td>{{d.name}}</td>
          <td>{{d.phone}}</td> 
          <td>{{d.username}}</td>
          <td>{{d.website}}</td>
        </tr>
        <tr ng-if="d.length < 1">
          <td colspan="5" class="text-center">No Router Found</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

swestner · Accepted Answer · 2017-01-06 23:30:41Z

1

In this case I would probably create a custom filter.

The tricky part here is that your object model is not flat, so we have to do a deep traversal to check the fields. The caveat to this approach is that you could potentially be checking against fields that are not visible (although i believe this is how the default angular filter behaves).

If that is an issue, you could adjust the filter to pass in a list of fields to check against and use those to filter out unwanted fields.

Here is the filter :

app.filter('wildcard', function() {

  return function(list, value) {

    if (!value) {
      return list;
    }

    var escaped = value.replace(/([.+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    var formatted = escaped.replace('*', '.*')

    if (formatted.indexOf('*') === -1) {
      formatted = '.*' + formatted + '.*'
    }

    var output = []

    angular.forEach(list, function(item) {
      var regex = new RegExp('^' + formatted + '$', 'im');
      if (traverse(item, regex)) {
        output.push(item);
      }
    });

    return output
  }

  function traverse(item, regex) {
    for (var prop in item) {

      //angular property like hash
      if(prop[0] === '$$'){
        return;  
      }

      var value = item[prop];

      if (typeof value === 'object') {
        traverse(value, regex);
      }

      if(regex.test(value)){
        return true;
      }
    }
  }
})

And then in you html :

 <tr ng-repeat="d in data | wildcard:search">

Here is the plunker

edited Jan 6, 2017 at 23:30

answered Jan 6, 2017 at 23:08

swestner

1,91716 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kabeer rifaye Over a year ago

I am getting error TypeError: value.replace is not a function on page load. and you have forgot to remove the debugger.

swestner Over a year ago

Are you getting the error from the plunker i posted? I dont seem to be.

swestner Over a year ago

I also see no errors if i cut and past the filter into your plunker.

kabeer rifaye Over a year ago

working fine now. This is what I am looking for. Thank you so much.

kabeer rifaye Over a year ago

When I try using the same regEx in my another application. The special character is not working in the search. Ex. If I have an IP Address(10.0.0.1). When I type 10.*, 1*1, .1 It doesn't showing anything.

Collectives™ on Stack Overflow

How to add regEx in angular filter

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related