jQuery的突出顯示不能正常工作與連續搜索

Question

我使用下面的jquery函數突出顯示div標籤內的單詞。

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>"; 
     }); 
    }); 
}); 

};

其實它的工作只有一個字的組合，但它錯過了重複。我使用了mark.js，但是我對mark.js有其他限制。任何人都可以告訴我這個代碼有什麼問題嗎？

Answer 1

啓發the answer @SquareCat在評論mentionned的，我覺得我做了一些偉大的工作。

您沒有指出如何調用此腳本，順便說一下...
所以我可能在使用它的方式上有錯誤。

但是I reproduced your problem in this CodePen。

然後，I made it working in this CodePen，使用4個單詞都被正確發現了3次。

在下面的片段中，我將我的運氣推到了7個單詞5次。
;）

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>