Jquery + regex 脚本以任意顺序匹配单词以进行实时搜索

Question

所以我刚刚遇到了一个jquery实时搜索脚本，它使用正则表达式来过滤并显示与输入文本匹配并隐藏其余部分的列表项。

问题是，它只匹配短语并且按升序排列。

假设我的列表是:

<ul class="my_ul">
   <li><a>Nvidia gtx 970 vs amd rx 390</a></li>
   <li><a>Nvidia gtx 1060 vs nvidia gtx 970</a></li>
</ul>

现在，如果我输入:1060 gtx nvidia970，它应该返回第二个 li，并忽略任何额外的空格。 (均值应仅以任意顺序匹配单个单词，忽略空格)

现在我正在使用这个脚本:

$("#search-input").keyup(function(){

  // Retrieve the input field text and reset the count to zero
  var filter = $(this).val(), count = 0;

  // Loop through the comment list
  $(".my_ul li").each(function(){

      // If the list item does not contain the text phrase fade it out
     if ($(this).text().search(new RegExp(filter, "i")) < 0) {

          $(this).fadeOut(200);

      // Show the list item if the phrase matches and increase the count by 1
      } else {
          $(this).show();

          count++;
      }
  });

  // Update the count
  var numberItems = count;
  $("#filter-count").text("Number of Comments = "+count);
  });

但这仅在单词按顺序排列时才匹配，例如:gtx 1060 与 nvidia gtx 970，

这是 jsfiddle: https://jsfiddle.net/xpvt214o/257804/

请为我解决这个问题，我是一个初学者，刚刚接触正则表达式，所以无法通过使用此处的一些代码替换正则表达式来解决这个问题，这是 stactoverflow。请帮忙，谢谢:)

Answer 1

这里要解决的问题是在 filter 变量中分隔数字和字母。 事实上，正则表达式可以很方便地做到这一点:

filter.match(/[a-zA-Z]+|[0-9]+/g).join("|")

此匹配字母或数字，并使用正则表达式交替作为分隔符再次连接结果数组到字符串。这使我们能够独立搜索数字和字母。

但是，有一个问题:由于数字和字母是分开的，你可能会得到意想不到的结果，例如。搜索 Phantom90，会出现 390 和 Phantom9 的行。为了改进，您可以在搜索引擎中使用的带引号的字符串中添加“精确短语”搜索；或者用前瞻包装分隔的元素以过滤包含每个元素的字符串。后面的方法如下所示:

示例代码

$("#search-input").keyup(function(){
  // Retrieve the input field text and reset the count to zero
  var filter = $(this).val(), count = 0;
  // Loop through the comment list
  $(".my_ul li").each(function(){
      var pattern = filter.trim().match(/[a-zA-Z]+|[0-9]+/g) || "";  // null coalescing: "" if null
      if(pattern) {
        pattern = pattern.map(function(el) { 
          return '(?=.*' + el + ')';
        });
        //join if there is something in the array
        pattern = pattern.join("");
     }
     //console.log(pattern.join("")); 
     // If the list item does not contain the text phrase fade it out
     if ($(this).text().search(new RegExp(pattern, "i")) < 0) {
          $(this).fadeOut(200);
      // Show the list item if the phrase matches and increase the count by 1
      } else {
          $(this).show();
          count++;
      }
  });

  // Update the count
  var numberItems = count;
  $("#filter-count").text("Number of Comments = "+count);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder="Search Me" id="search-input" type="text" /> 
<ul class="my_ul">
   <li><a>Nvidia gtx 970 vs amd rx 390</a></li>
   <li><a>Nvidia gtx 1060 vs nvidia gtx 970</a></li>
   <li><a>Phaeton vs Phantom9</a></li>
</ul>

备注:

• • 您可能不想将输入拆分为字母和数字，而是拆分为数字而不是数字，即 \d+|\D+。

• 输入过滤器中的一些特殊字符会破坏脚本，将其转义，如图 here .