Question

例如，搜索结果中有以下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＆＃39;＃aa＆＃39;。我认为使用each()和text()也许可以。还有更好的解决方案吗？

Answer 1

$('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>

使用替换和.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>

使用正则表达式

Answer 2

＆＃13;

$('#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>'));
  });
}

＆＃13;

.highlight {
  background-color: yellow;
}

＆＃13;

<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>

＆＃13;

Answer 3

最好使用text.textContent（）它更容易记住你仍然可以一次使用Jquery和JS

Answer 4

我找到了解决它的功能！它运作良好！

//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');

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

4 个答案: