jquery - 为搜索词结果添加背景颜色

Question

当用户在页面(基本上是一个大表格)上输入搜索词时，我试图向用户提交的搜索结果添加背景颜色。这是基于文本的搜索。我正在使用 jquery 显示/隐藏 TR 中没有搜索词作为文本的表行，但我理想情况下希望采取额外的步骤，获取搜索词(输入的值)，并匹配任何在剩余(显示)行中列出这些文本术语，并为单词添加黄色背景。我知道我的语法目前是错误的，只是不确定什么是正确的:)希望这是清楚的...非常感谢任何帮助!

$("#searchsubmit").click(function () {
	var searchexp = document.getElementById('searchbox').value;
	$("table tr").hide();
	$("table tr.header").show();
	$('tr:contains('+ searchexp +')').show();
	$(searchexp).css('background-color','yellow');
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="searchform" method="get" action="#">
  <input type="text" id="searchbox" />
  <input type="submit" value="Search" id="searchsubmit" />
</form>

Answer 1

您想要隐藏<tr>其内容中有 0 个匹配项，并且您还想突出显示 <tr> 中的匹配文本确实有匹配项。

为此，您需要使用正则表达式 ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp )

您接受输入，然后使用 RegExp 来匹配您要查找的字符串的所有实例。您迭代每个表 <tr> ，在其中迭代所有 <td> ，获取其文本，并将匹配的字符串替换为 <span>颜色为黄色。您还设置了一个变量 foundSomeMatch为 true，因此在完成 <tr> 的迭代后，如果有匹配的，可以.show() <tr>您目前所在的位置是。

您可以在下面的代码片段中尝试一下，尝试搜索test , test1或new entry看看过滤器是如何工作的。

$(document).ready(function(){
   $("#searchsubmit").click(function () {
	var searchexp = $("#searchbox").val();
	$("table").find("tr").hide();
        var matchSearched = new RegExp(searchexp,"ig");

        $("table").find("tr").each(function(){
           var foundSomeMatch = false;
           $(this).find("td").each(function(){
               let textInside = $(this).text();
               textInside = textInside.replace(matchSearched, function myFunction(x){
                   foundSomeMatch = true;
                   return '<span style="background-color: yellow;">'+x+'</span>';
               });
               $(this).html(textInside);
              if(foundSomeMatch){
                  $(this).closest("tr").show();
              }
           });
        });
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="searchform" method="get" action="#">
  <input type="text" id="searchbox" />
  <input type="submit" value="Search" id="searchsubmit" />
</form>


<table>
   <tbody>
      <tr><td>test1</td></tr>
      <tr><td>test2</td></tr>
      <tr><td>new entry</td><tr>
   </tbody>
</table>