Buenos días. Tengo una función que resalta el texto de una lista, según la palabra(s) por la que el usuario busca. El problema es que cuando escriben dos palabras por ejemplo "Juan Carlos" quiero que en la lista me cambie de color todos los Juan y Carlos. En este caso anda bien. Pero si Busco "Juan id", me quiere resaltar el id del span que se inserto anteriormente y el código html se rompe. ¿Como puedo identificar si la palabra es parte de los atributos de una etiqueta? o si esta contenida entre <>. Prueben Poner en el text "CARLOS", "JUAN", "ID". Y luego prueben "CARLOS ID"
Muchas gracias
function resaltar(control, txtResaltar) {
var str = $("#resultado").text().trim();
var textBusq = $("#textoBuscar").val();
if (textBusq == null || textBusq == "")
if (txtResaltar != null && txtResaltar != "")
textBusq = txtResaltar;
else {
return str;
}
var element = textBusq.split(' ');
$.each(element, function(index, contenido) {
var regEx = new RegExp(contenido, "gi");
str = str.replace(regEx, function(a, b) {
return '<span id="span2" style="font-weight:bold;color:red">' + a + '</span>';
});
});
$("#resultado").html(str);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input type="text" id="textoBuscar">
<input type="button" onclick="resaltar()" value="Buscar" />
<span id="resultado">JUAN CARLOS ID</span>