3

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>

1 respuesta 1

5

Cambie un poco la función resaltar, la idea ahora es que evalué todas las posibles búsquedas en la misma expresión regular para que no te evalué el HTML que agregas en las demás iteraciones

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(' ');
    var regexfilter="";
    $.each(element, function(index, contenido) {
         regexfilter+=contenido+"|";
    });
   var regEx = new RegExp(regexfilter, "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>

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.