搜索/克隆功能，无需区分大小写并能够确定要克隆的内容的优先级

Question

我当前具有搜索功能设置，该功能将分解您搜索过的单词，然后检查这些单词是否存在于特定的div中。如果这样做，它将克隆这些div并将它们列出在另一个名为.search-results的div中。目前，它运行良好，但是我想通过以下方法对其进行微调：

1. 能够做到，因此搜索不区分大小写。例如，如果我搜索“ apples”或“ APPLES”，它将仍然知道使用单词“ Apples”来克隆div。

2. 具有与搜索的句子匹配最多的单词的克隆div放在.search-results类的顶部，这是为了使那些元素优先于仍包含搜索词的其他元素但也许会少一些。

我希望一切都有意义。任何帮助都会很棒。以下是运行良好的代码示例，但是就像我说的那样，我只是想对其进行微调。非常感谢。

$("#search-submit").on("click", function() {
  var search = $("#search-input").val();
  if (search !== "") {
    var searchArray = search.split(" ");
    searchArray.forEach(function(searchWord) {
      $(".box").each(function() {
        if ($(this).is(":contains(" + searchWord + ")")) {
          $(this).clone(true).appendTo(".search-results");
        }
      });
    });
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
  <input id="search-input" type="text" />
  <input id="search-submit" type="submit" value="Submit" />
</div><br/>
<div class="search-results"></div><br/>
<div class="box">Apples Banana Blueberries</div>
<div class="box">Cherries Pineapple Strawberries</div>
<div class="box">Lemon Mango Orange</div>

Answer 1

要使搜索大小写不敏感，您可以使用正则表达式在每个.box的文本中查找搜索词。

此外，该正则表达式可用于计算.box中的匹配数，然后在循环完成后按该值计算sort()。

请注意，在下面的示例中，我将'Crabapple'值添加到其中的一个框上，因为它有两个'apple'实例要搜索。这将始终将结果置于顶部。

[最后，请注意，每次执行新搜索时，我都会向结果empty()添加一个调用。您原来的示例并未删除之前的搜索结果。

let $results = $('.search-results');

$("#search-submit").on("click", function() {
  let searchArray = $("#search-input").val().trim().split(' ');
  $results.empty();
  
  searchArray.forEach(function(word) {
    $(".box").each(function() {    
      let re = new RegExp(word, 'gi');
      let matches = ($(this).text().match(re) || []).length;      
      if (matches != 0) {
        $(this).clone(true).appendTo($results).data('matches', matches);
      }
    });
  });
  
  $results.find('.box').sort((a, b) => $(a).data('matches') < $(b).data('matches') ? 1 : -1).appendTo($results);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
  <input id="search-input" type="text" value="apple" />
  <input id="search-submit" type="submit" value="Submit" />
</div><br/>
<div class="search-results"></div><br/>
<div class="box">Apples Banana Blueberries</div>
<div class="box">Cherries Pineapple Strawberries Crabapple</div>
<div class="box">Lemon Mango Orange</div>