La mia soluzione personale con qualche opzione avanzata di ricerca
L'area su cui eseguire la ricerca è quella contraddistinta dall'id="area_di_ricerca" (configurabile)
La ricerca esclude naturalmente i tag html
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xhtml 1.0</title>
<style type="text/css">
/* <![CDATA[ */
body {
font: 11px Verdana, Arial;
}
fieldset {
border: 1px #ccd solid;
padding : 10px;
}
.foundword {
font-style: italic;
background: #d5d6f3;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
var word = '';
var area = '';
function $(id) {
return document.getElementById(id);
}
function trim(value) {
return value.replace(/^\s*(.+?)\s*$/, function($0, $1) {
return $1;
});
}
function findKey(word) {
// MultiSearch
if ($('multiSearch').checked)
arearicerca = trim($('area_di_ricerca').innerHTML);
else
arearicerca = trim(area)
/* ****************************************************** */
// upperLower
if ($('upperLower').checked)
modifiers = 'gm'
else
modifiers = 'gim'
/* ****************************************************** */
//exactWord
if ($('exactWord').checked)
word = '\\b' + word + '\\b';
/* ****************************************************** */
text_re = new RegExp(word , modifiers)
if (arearicerca.match(text_re)) {
var nmatch = 0;
arearicerca = arearicerca.replace(text_re, function($0) {
++nmatch;
return "<span class='foundword'>"+ $0 +"</span>";
});
$('area_di_ricerca').innerHTML = arearicerca;
alert('Ho trovato ' + nmatch + ' risultato/i');
}
else {
alert('parola non trovata');
}
}
function doFind(value) {
word = trim(value);
if (word.length < 3) {
alert('inserire una keyword di almeno 3 caratteri');
return;
}
// La ricerca deve escludere i tag Html
word = word.replace(/</, '<').replace(/>/, '>')
findKey(word);
}
window.onload = function() {
area = trim($('area_di_ricerca').innerHTML);
}
/* ]]> */
</script>
<body>
<div id="area_di_ricerca">
<h3>Tratto da : http://it.wikipedia.org/wiki/Interstella_5555</h3>
</p>
Interstella 5555, titolo completo Interstella 5555: the 5tory of the 5ecret 5tar 5ystem,
è un film d'animazione prodotto in Giappone nel 2003 dalla Toei Animation e basato interamente
sull'album Discovery della band elettronica Daft Punk. Co-regista del film nonché ideatore del
concept visivo di personaggi e ambientazioni è il celeberrimo Leiji Matsumoto, autore fra l'altro
di serie animate quali Capitan Harlock e Galaxy Express 999.
</p>
Il film è totalmente senza dialogo, le uniche parole pronunciate sono quelle delle canzoni che, si
può dire, non sono solo la colonna sonora, ma parte integrante del film stesso. Ognuna delle 13 canzoni
dell'album è collegata a una parte del film.
</p>
Su un pianeta situato in una galassia sconosciuta, abitato da esseri identici agli umani ma dalla pelle blu,
si esibiscono in concerto quattro musicisti. Mentre tutta una metropoli segue il concerto, un'astronave
si avvicina al pianeta e ne discende un commando di personaggi mascherati i quali tramite un gas soporifero
stordiscono i quattro, nonché l'intero pubblico presente al concerto e le forze di sicurezza. I quattro musicisti,
assieme ai loro strumenti, vengono rapiti e portati al cospetto di un misterioso individuo...
</p>
</div>
<form action="#">
<fieldset>
Keyword <input type="text" id="text" />
<input type="checkbox" id="multiSearch" /><label for="multiSearch">Ricerca Multipla</label>
<input type="checkbox" id="upperLower" /><label for="upperLower">Maiuscole/Minuscole</label>
<input type="checkbox" id="exactWord" checked="checked" /><label for="exactWord">Parola esatta</label>
<input type="button" value="Cerca" onclick="doFind(document.getElementById('text').value)" />
</fieldset>
</form>
</body>
</html>
-Fab-
Permessi di invio
Rispondi quotando