Script javascript: Evidenziare tramite jquery le parole trovate in una pagina

   difficoltà:  script script script script script

Script simili
19/11/2008


Quando si arriva in una pagina da un form di ricerca potrebbe esserci utile evidenziare nella pagina le parole cercate. Una delle possibilità potrebbe essere quella di usare jquery e un plugin: highlight.

Con questo plugin potremo indicare facilmente quali parole evidenziare nella pagina.

Vediamo ora l'uso. Per prima cosa dobbiamo richiamare la libreria jquery, che essendo hostata sui server di google prenderemo da li, per cui non dovremo ne scaricarla ne tantomeno far caricare la libreria dai nostri server (con un bel risparmio di banda);

Includeremo quindi la libreria a inizio script utilizzando le api ajax di google, vedi spiegazione nell'articolo:
Script ajax: Caricare librerie ajax dai veloci server di google:

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
</script>

Fatto questo dobbiamo scaricare il plugin per l'highlight che troviamo qui: jquery.highlight-2.js e inserirlo nella pagina. Avremo quindi:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
</script>
<script src="js/jquery.highlight-2.pack.js"></script>

A questo punto dobbiamo scegliere uno stile per le parti evidenziate. Ad esempio, giallo tipo evidenziatore:
<style>
.highlight { background-color: yellow }
</style>

Infine dovremo dire che al caricamento della pagina deve evidenziare le parole trovate all'interno dell'elemento che desideriamo. Ad esempio l'intero body della pagina:
<script>
$(document).ready(function() {
$('body').each(function() { $.highlight(this, 'PHP'); });
$('body').each(function() { $.highlight(this, 'JAVASCRIPT'); });
$('body').each(function() { $.highlight(this, 'ASP'); });
});
</script>

Ad esempio nello script precedente diremo di evidenziare tutte le parole "php", "javascript", "asp" della pagina.
Attenzione la parola da cercare va scritta in MAIUSCOLO. Comunque verranno trovate anche le parole in minuscolo.

Se vogliamo trovare le occorrenze solo all'interno di uno specifico div cambieremo così:
<script>
$(document).ready(function() {
$('#iddiv').each(function() { $.highlight(this, 'JAVASCRIPT'); });

});
</script>

cosi la ricerca sarà effettuata solo nel div con id specificato.

Esempio completo:
<html>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
</script>
<script src="js/jquery.highlight-2.pack.js"></script>
<style>
.highlight { background-color: yellow }
</style>
<script>
$(document).ready(function() {
$('body').each(function() { $.highlight(this, 'PHP'); });
$('body').each(function() { $.highlight(this, 'JAVASCRIPT'); });
$('body').each(function() { $.highlight(this, 'ASP'); });
});
</script>

<body>
questo testo contiene la parola javascript, asp e php. Tramite uso di jquery, quindi javascript troverà le parole indicate
</body>
</html>

Chiaramente per rendere dinamica la cosa al posto di javascript, asp e php potremo mettere le parole che arrivano tramite querystring o form, prelevando le variabili con asp o php.




Commenti


  Verdelite

9/3/2009 11:03:32

Peccato che jquery.highlight-2.pack.js non sia disponibile.... :-(

  Fabio

9/3/2009 11:16:03

E' uscito il 3.
Ho aggiornato il link

  Verdelite

9/3/2009 14:09:58

Ok, quindi sarebbe meglio cambiare anche il filename nell'inclusione del js

js/jquery.highlight-2.pack.js

in

js/jquery.highlight-3.pack.js ?

  Stefano

20/3/2009 15:47:40

Ottimo script, come idea me gusta.. ma non riesco a farlo funzonare.



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.