Invalid multi-valued expression of the word RegExp

Question

I am trying to draw attention to the correct search for keywords. A couple of questions that I have.

• Case insensitivity works for the first word, but would like it to replace the original word of the word, and not the lower case word.

i.e. search trend, it replaces the trend with the trend, I know why, but I would like to find out how to replace the found word, not the search word

2. The second word is not case-insensitive.

i.e. search trend micro does not match Micro trend.

Here is jsFiddle: http://jsfiddle.net/hh2zvjft/1/

if ($(".ProjectSearch").val().length > 0) { var searchedText = $(".ProjectSearch").val(); var wordList = searchedText.split(" "); $.each(wordList, function (i, word) { $(".ProjectTaskGrid:contains('" + word + "')").each(function (i, element) { var rgxp = new RegExp(word, "gi"); var repl = '<span class="search-found">' + word + '</span>'; element.innerHTML = element.innerHTML.replace(rgxp, repl); }); }); } 

Could you help identify problems and suggest improvements? Thanks!

Some links used to get the code:

stack overflow

stack overflow

Answer 1

Highlight a few words (ignore HTML tags)

Here is how I would do it: jsBin demo

 var $input = $("#input"); var $text = $("#area"); var org = $text.html() || ""; $input.on("input", function(){ var res, reg, words = [], val = $.trim(this.value.replace(/[^\w\s]/gi, '')); // remove Special Chars if(val.length > 0){ words = val.split(" "); reg = new RegExp("(?![^<]+>)("+ words.join("|") +")", "ig"); res = org.replace(reg, "<span class='highlight'>$1</span>"); } $text.html(words.length > 0 ? res : org); }).trigger("input"); 

 .highlight { background: gold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="input" type="text" value="tren pan com br" /> <div id="area">Renew Trend Worry-Free Business Security license that <a href="http://someweb.com">someweb.com</a> will expire in 60 days.<br> Activate BR like breakline trend and [ confirm <span>SOME <span>SPAN</span> IS HERE</span> upon electronic<br> delivery notification from Trend Micro</div> 

A pretty simple and cool reason why the code will not interfere (match) the lines in the HTML tags.

---

Highlight and sort table rows

Apply the same principle here for an example that will automatically damage table rows ( thead header thead ):

 $("input[data-highlightsort]").each(function(){ var dataTarget = $(this).data("highlightsort"); var $tbody = $("table[data-highlightsort='"+dataTarget+"'] tbody"); var org = $tbody.html() || ""; $(this).on("input", function(){ var res, reg, words, val = $.trim(this.value.replace(/[^\w\s]/gi, '')), // remove Special Chars hasVal=val.length>0; if(hasVal){ words = val.split(" "); reg = new RegExp("(?![^<]+>)("+ words.join("|") +")", "ig"); res = org.replace(reg, "<span class='highlight'>$1</span>"); } // Highlight $tbody.html(hasVal ? res : org); // Show/hide if(hasVal) $tbody.find("tr").hide().has(".highlight").show(); }).trigger("input"); }); 

 .highlight{ background: gold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="searchSort" type="text" data-highlightsort="table1" value="co"> <table data-highlightsort="table1"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Nickname</th> <th>Profile</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Roko</td> <td>C. Buljan</td> <td>roXon</td> <td><a href="http://stackoverflow.com/users/383904/roko-c-buljan?tab=profile">roko-c-buljan</a></td> <td>2010</td> </tr> <tr> <td>2</td> <td>stack</td> <td>Overflow</td> <td>SO</td> <td><a href="http://stackoverflow.com">stackoverflow.com</a></td> <td>2008</td> </tr> <tr> <td>3</td> <td>Community</td> <td></td> <td></td> <td><a href="http://stackoverflow.com/users/-1/community">community</a></td> <td>2008</td> </tr> </tbody> </table> 

Answer 2

You were close! Change line 7 to:

 var repl = '<span class="search-found">$&</span>'; 

Pay attention to $& . This is a link to the matching word and saves this case.

http://jsfiddle.net/hh2zvjft/2/

And as Roco noted in the comment below, you will get a constant increase in 3px fill on both sides if you keep clicking Find . To fix this, I would recommend to remove the registration from CSS or disable the Find button if the words are already selected.