使用过滤器进行搜索但忽略标点符号 [英] Do a search using filter but ignoring punctuations

问题描述

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

I wrote a search filter for an ionic project below. It works fine but for the fact that it does not ignore punctuations.

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

So if the item i am searching for an item that has a comma and I miss the comma I won't find it. Is there a way for me to tell the filter to ignore commas and maybe even other punctuations as well?

请参阅下面我的示例的一些片段:

See a few snippets of my example below:

<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"
}, ...

推荐答案

1. 您可以调用一个函数来过滤项目:

1. You could call a function to filter the items:

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

然后在控制器中定义:

$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 示例

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

You could also create a custom Angular filter:

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

然后像这样定义过滤器:

Then define the filter like this:

.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 示例

这两种方式我都使用正则表达式从搜索词和 hymn 属性中过滤掉所有标点符号，然后我将它们都转换为小写，这样用户就不必完全按照这是.有许多不同的方法可以做到这一点.希望这会有所帮助！

Both ways I am using a regular expression to filter out all of the punctuation from the search term and the hymn property, and then I am converting both of them to lower case so the user doesn't have to type it exactly as it is. There are many different ways you can do this. Hope this helps!

这篇关于使用过滤器进行搜索但忽略标点符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！