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

Question

for example, there is following html in search results, and the aa is the keyword:

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

I want to highlight the search keyword aa in results and don't change other anything : I try this:

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

But all html were replaced, include the href '#aa'. I think use the each() and text() maybe ok. And is there better solution?

@guradio I think it's bad idea to use `.text()` and replace text then apply text output to body !! — Mamdouh Saeed, Oct 29 '16 at 03:01
You want to replace the text of `"aa"` with the text `"bb"` through the whole document? In response to what event? — David Thomas, Oct 29 '16 at 03:25
@David Thomas I want to highlight the search keyword in the search results — 邱文强, Oct 29 '16 at 03:35
Highlight how, exactly? Replacing one string with another string doesn't typically highlight anything. — David Thomas, Oct 29 '16 at 03:39
Please add details like that to your question, where more people can see, more clearly, what you want the code to do. :) — David Thomas, Oct 29 '16 at 03:45
See my answer here: http://stackoverflow.com/a/40313088/3894981 — dude, Oct 29 '16 at 21:03

guradio · Answer 1 · 2016-10-29T03:17:08.193

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>

Using replace and .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>

Using regex

edited Oct 29 '16 at 03:17

answered Oct 29 '16 at 03:03

guradio

15,524
4
36
57

May be using regex will be better. It can handle replace of multiple occurance.. – Rajshekar Reddy Oct 29 '16 at 03:13
1

@Reddy check update – guradio Oct 29 '16 at 03:18
The html is just a example, maybe more complicate in actual. I want to just select a container div, then the content will be all replaced. Is the `.each()` and `.text()` required? – 邱文强 Oct 29 '16 at 03:22
yes because if you dont loop through each element you will not change all of them. – guradio Oct 29 '16 at 03:33
@guradio if the `` contains a ``? `.text()` will clear that. – 邱文强 Oct 29 '16 at 03:39
no it will get only text value – guradio Oct 29 '16 at 03:43
the `.text()` can not get the ``, so the `` will be lost after replace, this is not quite what I want. – 邱文强 Oct 29 '16 at 03:48
no that span will not be affected. you should add more details in your OP there are so many things that you expect that is not included in the OP – guradio Oct 29 '16 at 03:48

score 0 · Answer 2 · answered Oct 29 '16 at 07:20

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

Thanks for your coding! But I can just select a container tag that maybe include many different tag contains the keyword not just `` using RegExp and it don't need `.each()`, look for my code in answer. — 邱文强, Oct 29 '16 at 08:51

score -1 · Answer 3 · answered Oct 29 '16 at 03:01

-1

Your best off using text.textContent() Its easier Remember you can still use Jquery and JS at once

answered Oct 29 '16 at 03:01

Humzah Merchant

67
8

score -1 · Answer 4 · answered Oct 29 '16 at 06:27

I found a function to solve it! And it is working well!

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

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

4 Answers4