使用过滤器进行搜索但忽略标点符号

Question

我在下面为离子项目编写了一个搜索过滤器。它工作正常，但事实上它不会忽略标点符号。

因此，如果我正在搜索的项目有一个逗号，但我错过了逗号，我将找不到它。有没有办法告诉过滤器忽略逗号甚至其他标点符号？

请参阅下面示例中的一些片段：

<input class="search-bar" type="search" placeholder="Search" ng-model="data.searchQuery">
<ion-list>
  <ion-item  collection-repeat="hymn in hymns | filter: data.searchQuery">
    <h2><b>{{hymn.number}}. </b>{{hymn.title}}</h2>
  </ion-item>
</ion-list>

Javascript

var hymns = [
{
    "body": "I've written a body, it has punctuation too;\n",
    "number": 1,
    "title": "This Title, has a comma! and puctuations"
}, ...

Answer 1

你可以这样做

<input class="search-bar" type="search" placeholder="Search" ng-model="data.$">
<ion-list>
  <ion-item  collection-repeat="hymn in hymns | filter: data">
    <h2><b>{{hymn.number}}. </b>{{hymn.title}}</h2>
  </ion-item>
</ion-list>

笨蛋：http://plnkr.co/edit/I9XEk7ebBeWbzQtwdMPv?p=preview

希望对您有所帮助

Answer 2

您可以调用一个函数来过滤项目：

<ion-item collection-repeat="hymn in hymns | filter: myCustomFilter">
    <h2><b>{{hymn.number}}. </b>{{hymn.title}}</h2>
    <p>{{hymn.body}}
</ion-item>

然后在controller中定义：

$scope.myCustomFilter = function(hymn) {
    var searchTerm = $scope.data.searchQuery || '';
    searchTerm = searchTerm.replace(/[^\w\s]|_/g, "").toLowerCase()

    var hymnTitle = hymn.title.replace(/[^\w\s]|_/g, "").toLowerCase();
    var hymnBody = hymn.body.replace(/[^\w\s]|_/g, "").toLowerCase();    

    return hymnTitle.indexOf(searchTerm) > -1|| hymnBody.indexOf(searchTerm) > -1;
}

Codepen example using function

您还可以创建自定义 Angular 过滤器：

<ion-item collection-repeat="hymn in hymns | filterPunctuation: data.searchQuery">
    <h2><b>{{hymn.number}}. </b>{{hymn.title}}</h2>
    <p>{{hymn.body}}
</ion-item>

然后像这样定义过滤器：

.filter('filterPunctuation', function() {
  return function(items, searchTerm) {
    if (!searchTerm || '' === searchTerm) {
      return items;
    }

    searchTerm = searchTerm.replace(/[^\w\s]|_/g, "").toLowerCase();

    return items.filter(function(element, index, array) {
      var title = element.title.replace(/[^\w\s]|_/g, "").toLowerCase();
      var body = element.body.replace(/[^\w\s]|_/g, "").toLowerCase();
      return title.indexOf(searchTerm) > -1 || body.indexOf(searchTerm) > -1;
    });
  }
})

Codepen example using filter

这两种方式我都使用正则表达式过滤掉搜索词和赞美诗属性中的所有标点符号，然后我将它们都转换为小写，这样用户就不会必须按原样输入。有许多不同的方法可以做到这一点。希望这对您有所帮助！

使用过滤器进行搜索但忽略标点符号

Do a search using filter but ignoring punctuations

angularjs

ionic-framework

ionic

angularjs-filter