Includi alcune parole specificate con estensione in jQuery?

Question

Mi piacerebbe conoscere il modo più conveniente per racchiudere alcune parole specificate con tag span.

Esempio: Ho una parola, che è un cane. Ecco il testo originale:

I have a dog, do you have a dog? 

e l'uscita dovrebbe essere simile a questo:

I have a <span class="highlight">dog</span>, do you have a <span class="highlight">dog</span>? 

Qualsiasi aiuto?

MODIFICA: Nota, che dovrebbe anche racchiudere le parole, anche se non sono inviduali (Peter-dog). Spero tu abbia capito.

Answer 1

Ecco un utile jQuery plugin.

È davvero facile da usare e funziona benissimo.

modifica — questa è una mia risposta molto vecchia. Mi dispiace aver semplicemente collegato la libreria Lettering.js senza includere il suo nome. La libreria è utile, anche se non sono sicuro che qui 7 anni dopo il signor Rupert continui a mantenerlo attivamente.

Ciò che Lettering fa è passare attraverso i nodi di testo in una regione selezionata del DOM e avvolgere le singole lettere e/o parole (configurabili) nei tag <span> che possono quindi essere stilizzati. È semplice ma efficace. Anche se non vuoi usarlo, il codice non è molto esteso ed è istruttivo.

Answer 2

È possibile utilizzare JavaScript replace function. Ecco un esempio di base:

$('#container').html($('#container').html().replace(/(dog)/g,'<span class="highlight">$1</span>'));