jQuery: cercare ed evidenziare parole nel testo

jQuery: cercare ed evidenziare parole nel testo

Cercare ed evidenziare parole nel testo richiede semplicemente l'uso di espressioni regolari per sostituire la corrispondenza trovata con un elemento HTML che funge da evidenziatore. Con jQuery possiamo usare il metodo html() combinato con replace() per sostituire il contenuto dell'elemento di destinazione con il nuovo contenuto che comprende gli elementi di evidenziazione. Quello che ci occorre per il nostro esempio è l'oggetto JavaScript RegExp che ha la particolarità di accettare l'input dell'utente per costruire un'espressione regolare. Si tratta di una soluzione ideale per accettare termini di ricerca presi da un form. Vediamo insieme i dettagli.

Partiamo da questa marcatura:


<form action="#" method="get" id="search">
<div>
    <input type="text" name="q" id="q" />
    <input type="submit" name="highlight" id="highlight" value="Evidenzia" />
    <input type="reset" name="reset" id="reset" value="Resetta" />
</div>
</form>

<div id="content">
  <!-- contenuti testuali -->
</div>

L'unica regola CSS che ci serve è quella relativa all'elemento usato per evidenziare il testo:


.highlight {
  background: yellow; 
  font-weight: bold;
}

Creiamo una funzione da eseguire al caricamento della pagina:


function highlight () {

$('#search').submit(function(event) {
    
        var $query = $('#search #q').val();
        var re = new RegExp($query, 'gi');
        var targetHtml = $('#content').html();

       if(re.test(targetHtml)) {
       
           var matches = targetHtml.match(re);
           
           var no = (matches.length == 1) ? 'corrispondenza' : 'corrispondenze';
           var finds = (matches.length == 1) ? 'trovata' : 'trovate';
           
           $('<p/>').text(matches.length +  ' ' + no + ' ' + finds + '.').appendTo($(this));
           
           $('#content').html(targetHtml.replace(re, '<span class="highlight">'+matches[0]+'</span>'));          
       
       } else {
       
           $('<p/>').text('Termine non trovato.').appendTo($(this));
       
       }
    
       event.preventDefault();
       
       
    });


$('#search').bind('reset', function() {

  $('p', '#search').remove();

  $('span.highlight', '#content').each(function() {
  
    $(this).removeClass('highlight');
  
  });
  

});

}

Ecco i dettagli:

  1. L'espressione regolare usa i flag case-insensitive e global, in modo da eseguire una ricerca sull'intero contenuto senza badare alle maiuscole o minuscole.
  2. L'espressione regolare viene testata rispetto al contenuto HTML dell'elemento selezionato.
  3. Viene usato il metodo match() per ottenere un array di corrispondenze dall'espressione regolare.
  4. Vengono sostituite le corrispondenze trovate con un elemento span con classe CSS highlight avente come contenuto la corrispondenza stessa.
  5. Quando l'utente resetta il form, la classe CSS highlight viene rimossa dagli elementi span.

Usiamo la funzione highlight() in questo modo:


$(document).ready(function() {

    highlight();
    


});

Potete visionare l'esempio finale in questa pagina

Torna su