Estilo de texto resaltado en la búsqueda incremental JS

Question

Primera pregunta de StackOverflow - woo!

Una pregunta rápida sobre styling este pedazo de Javascript:

//Search 
$('#search').keydown(function(e) { 
    setTimeout(function() { 
     if ($('#search').val() == '') { 
      $('#history h4').show(); 
      $('#history li li').show(); 
      return; 
     } 

     $('#history h4').hide(); 

     var search = $('#search').val().toLowerCase(); 

     $('#history li li').each(function() { 
      var thisId = $(this).attr('id').substr(13); 
      var item = $.grep(history, function(item) { return item.id == thisId; })[0]; 
      if (item.message.toLowerCase().indexOf(search) != -1 || item.link.toLowerCase().indexOf(search) != -1) 
       $(this).show(); 
      else 
       $(this).hide(); 
     }); 
    }, 1); 
}); 
}); 

¿Dónde pongo el estilo CSS en el Javascript para resaltar las letras en los resultados de búsqueda?

<font class="highlight"></font> 

Esto es similar a buscar usando Ctrl + F en el navegador.

Cualquier ayuda sería muy apreciada. ¡Gracias!

JP

Answer 1

En su segunda declaración if se podría añadir algo como:

reg_expression = new RegExp("(" + search + ")","ig"); 
$(this).html($(this).html().replace(reg_expression, '<span class="highlight">' + "$1" + '</span>')); 

Tenga en cuenta que he utilizado en lugar de spanfont para la clase highlight.

También tenga en cuenta que estoy asumiendo que su li li solamente contiene los textos y no hay etiquetas HTML, ya que cualquier secuencia de caracteres que coincida con search será reemplazado por <span>search</span> por lo que podría conducir a problemas si usted tiene por ejemplo, vínculos donde el valor href contiene su término de búsqueda.

Por cierto, tiene que quitar todos los span 's o fonts' s antes de agregar las nuevas.