jQuery / JS - 在DIV中计算结果

Question

我很喜欢JS，所以请轻松一点。

我有一个简单的搜索表单，搜索整个BODY并在点击功能后突出显示搜索词。这很有效。但是，我想添加函数来返回找到的结果数（除了就地突出显示功能）。编辑：此外，结果不会显示在页面上，它们只能由JS脚本按设计突出显示。所以，基本上，我只需要一种方法来显示执行搜索后突出显示的结果数。

我只能找到如何使用表中的数据执行此操作。但是，我的数据不在表格中。

此外，这不能是“实时”搜索，我只需要在点击事件被触发后才能触发。

我能找到的最接近的解决方案是HERE但是，这是一个表格中的实时搜索。

到目前为止，这是我的表格：

$('document').ready(function() {

  $('#button').click(function() {
    var searchbox = document.querySelector('#text-search');
    var searchForm = document.querySelector('#search');
  });
});


function highlight() {
  var text = document.getElementById("text-search").value;
  var query = new RegExp("(\b" + text + "\b)", "gim");
  var e = document.getElementById("body").innerhtml;
  var enew = e.replace(/(<span>|</span>)/igm, "");
  document.getElementById("body").innerHTML = enew;
  var newe = enew.replace(query, "<span>$1</span>");
  document.getElementById("body").innerHTML = newe;
  color = "#f6f";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<body>


  <div id="search" class="Column">
    <form id="searchForm" method="post" action="" onsubmit="highlight(); return false;">
      <input name="text-search" id="text-search" type="text" value="" class="input" placeholder="search & highlight">
      <input id="submit" type="submit" value="Submit" class="button" />
    </form>
    <div class="count">search results: </div>
  </div>

  <div class="slide">
    <div class="expand">
      data
    </div>
  </div>

</body>

更新：

我几乎找到了一个解决方案，感谢JS向导帮助我解决另一个问题。因此，下面的代码IS计算结果的数量，但是，它为页面上的每个DIV添加+1，即使搜索的术语在该DIV中不存在。所以，如果我的身体看起来像下面的例子，我搜索了TEST，结果将是5（2个搜索词+ 3个DIV）

身体：

<div1>
  test
</div>
<div2>
  test
</div>
<div3>
  hai
</div>

JS：

function count() {
  var count =
  $("#body span").length;
  $(".count").text(count);
};

那么，我该如何调整DIV的数量呢？

https://jsfiddle.net/seanvree/mqyxqfgu/

Answer 1

另一答案