使用CSS或jQuery搜索并突出显示文本背景

6 html javascript css jquery

我有一个div包含一些文字:

<div>Some text here</div>
Run Code Online (Sandbox Code Playgroud)

我还有一个文本框,用户将在其中输入搜索字符串.

有没有CSS办法为background-color匹配在搜索字段中输入的特定关键字的文本字符串设置属性?

我目前所做的是使用JavaScript查找和替换.我准备使用jQuery了.

小智 3

发现这个名为 SearchHighlight 的 jQuery 插件

这是代码

CSS

<style type='text/css'>
 span.hilite {background:yellow}
</style>
Run Code Online (Sandbox Code Playgroud)

JavaScript

<script src='SearchHighlight.js'></script>
<script type='text/javascript'>
  $(function(){
      $('#textBoxId').keyup(function () {
          var val = $(this).val();
          var options = {
              exact:"partial",
              style_name_suffix:false,
              keys:val
          }
          $(document).SearchHighlight(options);
      }
  });
</script>
Run Code Online (Sandbox Code Playgroud)