如何使用jquery在搜索结果中突出显示搜索关键字

How to use jquery to highlight the search keyword in search results?

本文关键字：显示 搜索 关键字 何使用 jquery 搜索结果      更新时间：2023-09-26

例如，在搜索结果中有以下html, aa为关键字:

<body>
<div>
    <h2><a href="#aa">aabbcc</a></h2>
</div>
<div>
    <h2><a href="#bb">aaeeedd</a></h2>
</div>
<div>
    <h2><a href="#cc">vvaapp</a></h2>
</div>
</body>

我想在结果中突出显示搜索关键字aa，并且不改变其他任何东西:我试试这个:

var text = $('body').html().replace(new RegExp('aa','gim'),"<span class='highlight'>aa</span>");
$('body').html(text);

但是所有html都被替换了，包括href '#aa'。我想用each()和text()也许可以。有更好的解决方案吗?

$('div a').each(function() {
  var text = $(this).text();
    $(this).text(text.replace('aa', 'bb')); 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div>
    <h2><a href="#aa">aabbcc</a></h2>
  </div>
  <div>
    <h2><a href="#bb">aaeeedd</a></h2>
  </div>
  <div>
    <h2><a href="#cc">vvaapp</a></h2>
  </div>
</body>

使用replace和.text() 

$('div a').each(function() {
  var text = $(this).text();
    $(this).text(text.replace(/[aa]+/g, "bb")); 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div>
    <h2><a href="#aa">aabbcc</a></h2>
  </div>
  <div>
    <h2><a href="#bb">aaeeedd</a></h2>
  </div>
  <div>
    <h2><a href="#cc">vvaapp</a></h2>
  </div>
</body>

使用regex 

$('#filter').on('keyup', function(event) {
  var keyword = event.currentTarget.value;
  highlight('a', keyword);
});
function highlight(selector, keyword) {
  $(selector).each(function(index, element) {
    var $element = $(element);
    var original = $element.data('originalText');
    if (original == undefined) {
      original = $element.html();
      $element.data('originalText', original);
    }
    $element.html(original.replace(keyword, '<span class="highlight">' + keyword + '</span>'));
  });
}
.highlight {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <input type="text" id="filter"/>
  <div>
    <h2><a href="#aa">aabbcc</a></h2>
  </div>
  <div>
    <h2><a href="#bb">aaeeedd</a></h2>
  </div>
  <div>
    <h2><a href="#cc">vvaapp</a></h2>
  </div>
</body>

你最好使用text.textContent()它更容易记住，你仍然可以同时使用Jquery和JS

我找到了一个函数来解决它!而且效果很好!

//highlight the search keyword
function highlight($area,keyword) {
    var re = new RegExp("(" + keyword + ")(?=[^<>]*<)","gi");
    var html = $area.html().replace(re, '<span class="searchkeyword">$1</span>');
    $area.html(html);
}
highlight($('body'), 'aa');
相关文章：