Cercare una parola in una pagina

---

Una funzionalità interessante potrebbe essere una form che ci permette di ricercare parole nella pagina html che stiamo visualizzando, utile in special modo quando visualizziamo pagine molto lunghe e ricche di testo

Faremo uso di una libreria jquery , richiamiamo il file inserendo questa riga di codice all'inizio della pagina nei tag Head

<script type="text/javascript" src="jquery.min.js"></script>

 

Con questo codice costruiamo la form di ricerca da inserire nella pagina

<form action="#" method="get" id="search"> <div>     <input type="text" name="q" id="q" />     <input type="submit" name="highlight" id="highlight" value="cerca parola" />     <a href="cerca2.html">resetta</a></div> </form>

 Inseriamo questo codice javascript tra itag head

<script type="text/javascript"> function highlight () { $('#search').submit(function(event) {           var $query = $('#search #q').val();         var re = new RegExp($query, 'gi');         var targetHtml = $('#content').html();        if(re.test(targetHtml)) {             var matches = targetHtml.match(re);                  var no = (matches.length == 1) ? 'corrispondenza' : 'corrispondenze';            var finds = (matches.length == 1) ? 'trovata' : 'trovate';                      $('#content').html(targetHtml.replace(re, '<span class="highlight">'+matches[0]+'</span>'));                      } else {                $('<p/>').text('Termine non trovato.').appendTo($(this));             }         event.preventDefault();     }); } $('#search').bind('reset', function() {   $('p', '#search').remove();   $('span.highlight', '#content').each(function() {     $(this).removeClass('highlight');   }); }); $(document).ready(function() {      highlight(); }); </script>

 Tra i div content inseriamo il testo.

Possiamo cambiare il colore dell'evidenziatore agendo sul codice di style interno .highlight {background: yellow; è possibile utilizzare anche colori personalizzati inserendo un codice colore esadecimale tipo (#347890).

 Clicca qui per vedere un esempio file html 8 Kbites

Clicca qui per scaricare jquery.min.js 17Kbyte

Commenta questo articolo Visualizza i commenti (-0,5)