QUERY text matching and highlight FN

QUERY text matching and highlight FN

by Andrew Pougher

HTML

<div class="object"><span class="obid">C114MO</span></div>
<div class="object"><span class="obid">C114M1</span></div>
<div class="object"><span class="obid">C114M1</span></div>
<div class="object"><span class="obid">C114M45</span></div>
<div class="object"><span class="obid">C114M45</span></div>
<div class="object"><span class="obid">C114M45</span></div>

CSS

div {   padding:10px;}

.obid span {  
    padding:10px;

     opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;

}
.highlightWord { background-color: #ff2;border:3px solid #efefef;     transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;opacity: 0.5; }

JavaScript

$(document).ready(function() {
     $('.object').click(function(e) {
          $(".highlightWord").replaceWith(function() { return $(this).contents(); });
           var wordID = $(this).find('span.obid').text();
           //alert(wordID);
          e.preventDefault();
          $("body *").pougherlight(wordID, "highlightWord");
     });
 });
     
     

jQuery.fn.pougherlight = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {
            return "<span class=\"" + className + "\">" + matched + "</span>";
        });
    });
};