jquery highlight is not working properly with continuous search

Question

I am using this below jquery function to highlight a word in inside a div tag.

jQuery.fn.highlight = function (str, className) {
var regex = new RegExp(str, "gi");
return this.each(function () {
    $(this).contents().filter(function () {
        return this.nodeType == 3 && regex.test(this.nodeValue);
    }).replaceWith(function () {
        return (this.nodeValue.replace("<", "&lt;").replace(">", "&gt;") || "").replace(regex, function (match) {
            return "<span class=\"" + className + "\">" + match + "</span>";
        });
    });
});

};

actually its working with only one word combination but its miss the repeation. I used mark.js but i have some other limitation with mark.js. Can anyone tell me whats wrong with this code ?

See here for some information on how to replace all occurrences of a string: http://stackoverflow.com/questions/1144783/how-to-replace-all-occurrences-of-a-string-in-javascript — SquareCat, Mar 06 '17 at 07:53
What's your problem with mark.js? Using `.replace()` is evil as it'll destroy events and triggers regeneration of the DOM. You should definitely go ahead with mark.js. — dude, Mar 06 '17 at 10:28

score 0 · Accepted Answer · edited May 23 '17 at 12:02

Inspired of the answer @SquareCat mentionned in comments, I think I've made something working great.

You did not indicate how you call this script, by the way...
So I may be wrong on the way you use it.

But I reproduced your problem in this CodePen.

Then, I made it working in this CodePen, using 4 words that were all correctly found 3 times.

In the below snippet, I'm pushing my luck to 7 words 5 times.
;)

jQuery.fn.highlight = function (str, className) {
  var target = $(this)[0].innerHTML;
  var replacement = "<span class='"+className+"'>"+str+"</span>";
  return target.replace(new RegExp(str, 'gi'), replacement );
}

$("#go").on("click",function(){
  var words = $("#search").val().split(" ");
  var colors = ["yellow","pink","cyan","orange","grey","blue","red"];

  for(i=0;i<words.length;i++){
    $(document).find("#test").html( $(document).find("#test").highlight(words[i],colors[i])  );
  }
});

$("#reset").on("click",function(){
  $("#test").find("span").each(function(){
    var temp = $(this).html();
    $(this).replaceWith(temp);
  });
});

.yellow{
  background-color:yellow;
}
.pink{
  background-color:pink;
}
.cyan{
  background-color:cyan;
}
.orange{
  background-color:orange;
}
.grey{
  background-color:grey;
}
.blue{
  background-color:blue;
  color:white;
}
.red{
  background-color:red;
  color:white;
}

input{
  width:20em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">
  This was an interesting problem. Now some part of speach are correctly identified and some part of speach are also correctly identified. Some Other part of speach are identified many times correctly. So to have them correctly identified, some are part of speach is some part of speach are correctly identified. And I know that this sentence is horrible! ;)
</div>
<br>
<input type="text" id="search" value="some part of speach are correctly identified">
<button id="go">GO</button>
<button id="reset">RESET</button>

Hi Louys, thanks a lot for your response and the code piece its working like charm, but it is also replacing the search word. example if i give a search word with lower case and upper case combination. its blindly replacing with whatever we are giving as search word. — user3240560, Mar 20 '17 at 04:54
Just drop the `i` in the regex `new RegExp(str, 'gi')`, if you want this to be case sensitive. — Louys Patrice Bessette, Mar 20 '17 at 23:29

jquery highlight is not working properly with continuous search

1 Answers1