Tutorial jQuery: evidenziare le parole in un testo con jQuery

Avete mai pensato di evidenziare le parole presenti in un testo con jQuery? Questo tutorial vi spiegherà come procedere in modo facile e veloce.

Evidenziare tutte le parole di un testo con jQuery

Demo 1

Nella prima demo, vi propongo uno script che divide tutte le parole creando di fatto degli span per ciascuna di esse. I vari span presenti all’interno del titolo h1 sono poi stilizzati via css per creare l’effetto che vedete in demo. Ecco i codici usati:

Struttura HTML

<h1>Targetweb Rocks!</h1>
<h1>Et ideo autem ipsum dolor sit amet</h1>

Stile CSS

h1 span {
    text-decoration: none;

    background: #4298cf;

    display: inline-block;

    padding: 0px 3px 0 7px;

    line-height: 51px; 

    color: #fff;
  }

Script jQuery

$(function() {

    $('h1').each(function() {

    //array con le parole

    var words = $(this).text().split(' ');

    //Per ciascun elemento crea gli span all'interno dell'h1

    $(this).empty().html(function() {

        for (i = 0; i < words.length; i++) {
            if (i == 0) {
                $(this).append('<span>' + words[i] + '</span>');
            } else {
                $(this).append(' <span>' + words[i] + '</span>');
            }
        }

    });//html

  });//each

});//DOM

Tagliare ed evidenziare il testo a piacimento

Demo 2

In questa seconda demo ho usato praticamente lo stesso script, ho però usato come delimeter della funzione split il trattino (-) in questo modo ho il controllo sugli span che non  verranno più generati automaticamente ma secondo la posizione in cui metteremo il trattino all’interno del titolo. In questo modo sono io che posso decidere quanto lunga deve essere la sottolineatura dell’elemento. Ecco il codice dello script modificato per questo esempio:

Struttura HTML

 <h1 class="title_lettering" >Targetweb - Guide e risorse - free!</h1>
 <h1 class="title_lettering">Et ideo autem  - ipsum dolor sit amet</h1>

Script modificato

$(function() {

  //Lettering
    $('.title_lettering').each(function() {

        var words = $(this).text().split('-');

        $(this).empty().html(function() {

            for (i = 0; i < words.length; i++) {
                if (i == 0) {
                    $(this).append('<span>' + words[i] + '</span>');
                } else {
                    $(this).append(' <span>' + words[i] + '</span>');
                }
            }

        });

    });// Fine lettering

});//DOM

Conclusioni

Demo 1 Demo 2
Per scaricare il file completo devi condividere l'articolo su un social network.

Un articolo che può risultare molto utile per creare layout creativi “fuori dagli schemi” o semplicemente per dare un tocco di creatività e movimento al vostro progetto. Che ne pensate?

Lascia la tua opinione

1 comment

  • Ciao, se invece io volessi colorare di colori differenti le parole …. diciamo con 5 colori? a ripetizione. Tipo : “blu, giallo, rosso, verde, viola” e poi di nuovo “blu, giallo, rosso, verde, viola” è un po che ci provo. Grazie cmq, bell’articolo.

×