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>

Answer 2

enter code here好像你需要jQuery荧光笔插件

http://mir3z.github.io/jquery.texthighlighter/

jQuery Text Highlighter是一个jQuery插件，用于突出显示HTML文档中的文本片段。

注意：如果您在jQuery中需要一些帮助，请参阅 http://jquery.com/

Answer 3

CSS无法做到这一点。使用像你一直在做的JS解决方案。

我的研究基于此问题的数据CSS 3 content selector?

Answer 4

使用jQuery UI即可试用

JavaScript代码

$("body").highlight(searchTerm);

<强> CSS

.highlight{background-color:yellow}

Answer 5

你可以像下面这样使用原始的 Jquery：

function highlight(term,text){
  let tags=text.split(term);
  $(tags).each(function(index,value) {
    tags[index]= '<span>'+value+'</span>';
  });

  return tags.join('<span class="bg-warning text-white">'+term+'</span>');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="test"></p>
<script>
  $(document).ready(function(){
    $("#test").html(highlight("search","your search term"));
  });
</script>

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

5 个答案: