jQuery: dare il background a una singola parola, selettore contains

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