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

问题描述

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

所以，如果该项目我正在寻找有一个逗号一个项目，我错过了逗号，我不会找到它。有我告诉过滤器忽略逗号，甚至其他标点符号以及一种方式？

请参见下面我举例的几个片段：

 ＆LT;输入级=搜索栏TYPE =搜索占位符=搜索NG-模式=data.searchQuery＆GT;
＆LT;离子列表＆gt;
  ＆LT;离子项目集合重复=圣诗圣歌|过滤器：data.searchQuery＆GT;
    ＆LT; H2＆GT;＆LT; B＆GT; {{hymn.number}}。 ＆所述; / B个{{hymn.title}}＆下; / H2＆GT;
  ＆LT; /离子项目＆GT;
＆LT; /离子列表＆gt;
 

的JavaScript

  VAR赞美诗= [
{
    身：我写了一个机构，它也标点符号; \\ n
    1号，
    头衔：这个称号，有一个逗号和puctuations！
}，...
 

解决方案

1. 您可以调用一个函数来筛选项目：

    ＆LT;离子项目集合重复=圣诗圣歌|过滤器：myCustomFilter＆GT;
       ＆LT; H2＆GT;＆LT; B＆GT; {{hymn.number}}。 ＆所述; / B个{{hymn.title}}＆下; / H2＆GT;
       ＆所述p为H.; {{hymn.body}}
   ＆LT; /离子项目＆GT;
    

   然后在控制器定义它：

     $ scope.myCustomFilter =功能（赞美诗）{
       VAR SEARCHTERM = $ scope.data.searchQuery || '';
       SEARCHTERM = searchTerm.replace（/ [^ \\ W \\ S] | _ /克，）.toLowerCase（）    VAR hymnTitle = hymn.title.replace（/ [^ \\ W \\ S] | _ /克，）.toLowerCase（）;
       VAR hymnBody = hymn.body.replace（/ [^ \\ W \\ S] | _ /克，）.toLowerCase（）;    返回hymnTitle.indexOf（SEARCHTERM）GT; -1 || hymnBody.indexOf（SEARCHTERM）GT; -1;
   }
    

   codePEN例如使用功能




2. 您还可以创建自定义过滤器角度：

    ＆LT;离子项目集合重复=圣诗圣歌| filterPunctuation：data.searchQuery＆GT;
       ＆LT; H2＆GT;＆LT; B＆GT; {{hymn.number}}。 ＆所述; / B个{{hymn.title}}＆下; / H2＆GT;
       ＆所述p为H.; {{hymn.body}}
   ＆LT; /离子项目＆GT;
    

   然后定义过滤器是这样的：

     .filter（'filterPunctuation'，函数（）{
     返回功能（物品，SEARCHTERM）{
       如果（！SEARCHTERM ||''=== SEARCHTERM）{
         返回的物品;
       }    SEARCHTERM = searchTerm.replace（/ [^ \\ W \\ S] | _ /克，）.toLowerCase（）;    返回items.filter（函数（元素，索引数组）{
         VAR标题= element.title.replace（/ [^ \\ W \\ S] | _ /克，）.toLowerCase（）;
         VAR体= element.body.replace（/ [^ \\ W \\ S] | _ /克，）.toLowerCase（）;
         返回title.indexOf（SEARCHTERM）GT; -1 || body.indexOf（SEARCHTERM）GT; -1;
       }）;
     }
   }）
    

   codePEN例如使用过滤器

我使用的是常规的前pression过滤掉所有来自搜索词和赞美诗财产标点和这两种方式，然后我转换他们两个人，这样用户不必为小写准确键入它，因为它是。有许多不同的方法可以做到这一点。希望这有助于！

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

   Then define it in the 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

2. 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 example using filter

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屋！