RegExp mayúsculas y minúsculas insensible a las mayúsculas

Estoy tratando de resaltar la búsqueda de palabras key funcionando correctamente. Un par de problemas que estoy teniendo.

  1. "Insensible a mayúsculas / minúsculas" funciona para la primera palabra, pero desearía que se sustituya por palabra de mayúsculas y minúsculas, no por minúsculas.

es decir, la tendencia de búsqueda, reemplaza tendencia con tendencia, sé por qué, pero me gustaría descubrir cómo replace la palabra encontrada, no la palabra buscada

  1. La segunda palabra no coincide entre mayúsculas y minúsculas.

es decir, la tendencia de búsqueda micro no coincide con la tendencia Micro.

Aquí está 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); }); }); } 

¿Pueden ayudarnos a identificar los problemas y ofrecer mejoras? ¡Gracias!

Algunas refererencias solían llegar al código:

https://stackoverflow.com/a/120161/2727155

https://stackoverflow.com/a/10011639/2727155

Resalta varias palabras (ignora las tags HTML)

Así es como lo haría: 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> 

¡Estabas cerca! Cambiar la línea 7 a:

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

Observe los $& allí. Es una reference a la palabra coincidente y conserva el caso.

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

Y como Roko señaló en el comentario a continuación, obtendrás un incremento constante de 3px en cada lado si sigues haciendo clic en Find . Para solucionarlo, recomiendo eliminar el relleno del CSS o deshabilitar el button Find si las palabras ya se han resaltado.