Questo breve esercizio ha come obiettivo quello di evidenziare una parola all’interno di un testo, selezionando fra i vari tag quello che contiene il nostro elemento target.
Partendo da questo html andremo a colorare il background della parola blue:
<div>Questo è un testo normale.</div> <div>Questo testo contiene <i>una parola blue</i></div> <div>Questo testo non verrà colorato</div>
Come prima cosa tramite jQuery selezioneremo il div che contiene la parola blue:
var selected = $('div:contains("blue")');
successivamente si tratterà di separare le singole parole e avvolgere in un tag span, in modo da poter poi applicare il background solo alla parola desisderata
selected.html($.map(selected.html().split(' '), function(n) {
return '<span>' + n + '</span> ';
}).join(''));
Ovvero lavorando sull’html dell’elemento selezionato, facciamo lo split usando come separatore lo spazio, su ogni elemento mettiama un tag span intorno e poi lo riuniamo al nostro codice.
questo punto il gioco è faatto poiché basta applicare la stessa soluzione che abbiamo usato per selezionare ma questa volta solo allo span e quindi applicare il css desiderato:
$('span:contains("blue")').css('background', 'blue');
L’esempio
