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

2 Solutions collect form web for “RegExp mayúsculas y minúsculas insensible a las mayúsculas”

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.

  • Reemplazar caracteres acentuados con ascii simples
  • JavaScript RegExp.test () devuelve falso, aunque debería devolver true
  • Regex word boundary \ b tiene problemas con diéresis (caracteres especiales en alemán)
  • Regex para contar el número de grupos de captura en una expresión regular
  • Eliminar los ceros iniciales y finales de una cadena
  • Expresión regular para la validation de passwords
  • captura una cadena y luego combina todas las demás palabras que comiencen con esa cadena
  • ayuda con expresiones regulares - ¿cómo puedo hacer que algunas URL no sigan?
  • ¿Cómo verificar si la cadena de input es una expresión Regular válida?
  • Cómo finalizar una expresión regular con una barra inclinada en Javascript
  • Regex necesitaba dividir una cadena por "."
  • Reemplazar guiones bajos con espacios y poner en mayúscula las palabras
  • Javascript regex cuelga (usando v8)
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.