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

Question

我有一个包含一些文本的 div:

<div>Some text here</div>

我还有一个文本框，用户可以在其中输入搜索字符串。

是否有 CSS 方法可以为与搜索字段中输入的特定关键字匹配的文本字符串设置 background-color 属性？

我目前所做的是使用 JavaScript 进行查找和替换。我准备为此使用 jQuery。

Answer 1

找到这个 jQuery plugin called SearchHighlight

这是代码

CSS

<style type='text/css'>
 span.hilite {background:yellow}
</style>

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>