Question

我正在努力创建一个内容很多的网站，但我仍在学习JavaScript，我不知道如何找到输入搜索栏的文字，然后在页面上找到它并突出显示它。额外的奖励积分，如果你这样做，如果你点击进入搜索也是如此。 ; P

Answer 1

您需要在搜索栏上制作所谓的事件监听器，因此每次更改时，您的程序都会查看屏幕上的所有文本，并将该文本与搜索栏的值进行比较。如果匹配，您的程序会将“匹配”替换为“<span class=highlight>match</span>” - 基本上您将添加一个带有CSS类的范围，该类将突出显示匹配的文本。

如果没有查看您的代码就很难给出一个例子，但我可以在这个免费课程https://javascript30.com/视频＃6上找到我所遵循的精彩指南。我不以任何方式参与课程，但它对我帮助很大。

Answer 2

好的，我这样做是为了在表格中搜索并仅显示匹配的结果，但是为了在整个页面中搜索并突出显示文本，它应该是这样的：

$('#your_input_id').bind('keyup change',function(){
     search = $(this).val().toLowerCase();
     var re = new RegExp(search, 'g');

     $('*').each(function(){
         $(this).css('background-color', 'transparent');
         target = $(this).text().toLowerCase();
         if(target.match(re) || target.match('^' + search)){
             $(this).css('background-color', 'yellow');
         }
     });
});

P.S。：不确定它是否适用于jQuery All Selector *，因为我从未在整个页面上尝试过它，因为使用该选择器可能需要很长时间：/

我在30分钟前删除了我的答案，因为我认为它不起作用（我没有测试），但是我取消删除，因为如果你改进代码它可能对你有所帮助

如何使用Javascript创建搜索栏，在页面上查找文本并突出显示它

2 个答案: