如何在角度过滤器中添加正则表达式答案

【问题标题】：How to add regEx in angular filter如何在角度过滤器中添加正则表达式
【发布时间】：2017-01-06 21:13:44
【问题描述】：

示例：plunker

从上面的例子中，我创建了一个使用 angular 过滤选项的简单表单。

就过滤器而言，它是 angular 提供的默认过滤器。目前，当我搜索文本“br”时，它会显示 id 1 和 10。

我想在搜索输入中添加正则表达式。可以使用regEx 完成搜索。

我需要的是，搜索项可以是

"br" => 显示两个数据，
"b*" => 显示所有以 b 开头的数据。
"*" => 所有数据
"*br" => 所有数据以br结尾。

上述搜索应根据搜索输入显示相关数据。

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>

【问题讨论】：

标签： javascript angularjs regex

【解决方案1】：

在这种情况下，我可能会创建一个自定义过滤器。

这里的棘手部分是您的对象模型不是平面的，因此我们必须进行深度遍历来检查字段。这种方法的警告是，您可能会检查不可见的字段（尽管我相信这是默认角度过滤器的行为方式）。

如果这是一个问题，您可以调整过滤器以传递要检查的字段列表并使用这些字段来过滤掉不需要的字段。

这是过滤器：

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;
      }
    }
  }
})

然后在你的 html 中：

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

Here is the plunker

【讨论】：

页面加载时出现错误 TypeError: value.replace is not a function。你忘了删除调试器。
你是从我发布的 plunker 那里得到错误吗？我好像没有。
如果我将过滤器切入您的插件中，我也看不到任何错误。
现在工作正常。这就是我要找的。非常感谢。
当我尝试在我的另一个应用程序中使用相同的正则表达式时。特殊字符在搜索中不起作用。前任。如果我有一个 IP 地址（10.0.0.1）。当我输入 10.*, 1*1, .1 它什么也没显示。