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

[button link=”http://www.targetweb.it/tutorial/2013/evidenziare-testo-jquery/index.html” color=”blue” target=”blank” size=”large”]Demo 1[/button]

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

[button link=”http://www.targetweb.it/tutorial/2013/evidenziare-testo-jquery/index2.html” color=”blue” target=”blank” size=”large”]Demo 2[/button]

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

[button link=”http://www.targetweb.it/tutorial/2013/evidenziare-testo-jquery/index.html” color=”blue” target=”blank” size=”large”]Demo 1[/button] [button link=”http://www.targetweb.it/tutorial/2013/evidenziare-testo-jquery/index2.html” color=”blue” target=”blank” size=”large”]Demo 2[/button]

[viral-download file1=”http://www.targetweb.it/download/2013/evidenziare-testo-jquery.zip” name1=”Scarica lo script!” url=”http://www.targetweb.it/tutorial-jquery-evidenziare-le-parole-in-un-testo/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#jQuery – Script per evidenziare un testo o un titolo” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]

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?

  1. 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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

icone-web-design-indispensabili
Up Next:

Icone Web Design: raccolta indispensabile in formato PSD

Icone Web Design: raccolta indispensabile in formato PSD