di indice in cercatori che elaborano nel client
Se la ricerca interna è basata su un indice di parole che non è Molto esteso, è possibile inviare l’indice al cliente e questo è il browser che esegue il processo di ricerca utilizzando JavaScript e Dom Management. Una soluzione consiste nella creazione di un file di testo piatto con l’indice di parole chiave, qualcosa del genere che abbiamo visto nell’argomento precedente:
...table 86tbody 86,12...
Quindi la chiave delle parole punta a numeri di documenti in cui si trovano. A sua volta, possiamo avere un altro file indice con gli URL:
...12 /ijk/lmn.html86 /abc/def/ghi.html...
Può essere inviato al client utilizzando le variabili di tipo stringa all’interno di un file .js, per Esempio:
var indice = "...;table=86;tbody=86,12;...";var claves = "...;12=/ijk/lmn.html;...;86=/abc/def/ghi.html;...";
Quindi nel browser potremmo applicare la funzione per convertire quelle catene negli array corrispondenti E lavora su di loro.
Ma quando ho fatto il mio motore di ricerca con JavaScript non ho usato questo concetto di indice chiave ma ho costruito l’indice esclusivamente utilizzando le intestazioni identificate. Questo è un esempio dell’Html dell’indice situato in <body> del documento:
<div></div><div> ... <div class="item"> ... <div style="text-indent:3em"> <a href="/temas/xhtml-css/cabecera.html#h0" class="h0"> Elementos XHTML de cabecera </a> </div> ... </div> ...</div>
L’indice viene inviato all’interno del documento, come elementi HTML, situati nel contenitore con che inizialmente ha le proprietà di stile overflow: hidden; height: 0; con ciò che non sarà essere mostrato nello schermo ma il suo contenuto è presente. Quindi ogni pagina è racchiusa in un contenitore come id="cabecera", dove l’identificatore è il nome del documento senza l’estensione. Pertanto, questo contenitore avrà tutti i collegamenti alle intestazioni del documento cabecera.html. Ogni collegamento <a> è anche contenuto in un altro <div> per fornirlo con elegante rientrato.
In Essence si tratta di circa Carica una variabile globale con una raccolta di dell’indice, Azione eseguita con il carico della pagina. Quindi l’utente quando si è alla ricerca di quella raccolta rimuovendo il testo interno dell’elemento e controllando la partita con la stringa di ricerca. Il vantaggio di inviare l’indice al cliente come elementi HTML è che può essere utilizzato direttamente come indice di contenuto, o meglio, un sommario, per il quale con JavaScript cambiamo le proprietà di stile del contenitore con id="indiceContenidos":
conten.style.overflow = "visible";conten.style.height = "auto";
Il grande vantaggio di questi motori di ricerca con JavaScript è che non consumano risorse del server durante l’elaborazione delle ricerche. Tutto è fatto nel browser. Ma la dimensione è una limitazione che condiziona questi motori di ricerca, quindi per un maggiore volume di intestazioni non sarebbe più efficiente inviarlo al browser del cliente. Questa ricerca include 862 collegamenti a tutte le intestazioni dei 16 documenti che costituiscono il glossario XHTML + CSS. La ricerca è quindi composta da:
- Documento cercato.html di 152kb con i collegamenti alle intestazioni.
- javascript searchies.js di 7kb per gestire il processo di ricerche.
- Stile esterno in parte del file XHTMLCSS-style.csss. Questo occupa 5kb ma il motore di ricerca è un importo inferiore.
In quanto segue è esposto come funziona questo motore di ricerca. Ma iniziamo dal fatto che abbiamo già costruito l’indice in base alla struttura indicata e che ripetiamo schematicamente di nuovo:
<div> ... <div> ... <div><a>...</a></div> <div><a>...</a></div> ... </div> ... <div> ... <div><a>...</a></div> <div><a>...</a></div> ... </div> ... </div>
per creare questo indice può automaticamente Consultare lo strumento di un argomento successivo che parla degli indici di costruzione. È un’utilità che ti consentirà di produrre questo indice in base ai documenti HTML selezionati, salvando l’HTML generato in un file di testo. Su quella pagina è spiegato come utilizzare questo strumento.
Struttura HTML-CSS del motore di ricerca con JavaScript
Visivamente il nostro motore di ricerca ha questa apparizione:
Questa è una casella di testo per la stringa di ricerca, un pulsante per avviare la ricerca, un’altra per aprire le opzioni più basse e un pulsante per mostrare il indice. Le opzioni di ricerca ti consentono di cercare i biglietti che contengono tutte le parole o solo una parola. Inoltre, possono anche essere cercate solo parole complete e maiuscole maiuscole.
Non è conveniente mostrare il modello di ricerca se questo motore di ricerca sarà destinato a un sito di utilizzo generale. Ma come qui l’obiettivo è mostrare tutti i dettagli possibili, il modello di ricerca è incluso. Quindi, anche l’utente interessato può provare altri modelli.Dal punto di vista dobbiamo ricordare che questo motore di ricerca funziona nel browser dell’utente, quindi gli errori tramite modelli eccessivi influenzeranno solo il browser e non il server.
Infine c’è un limitatore per il numero massimo di Risultati, perché per determinate ricerche come testi, ad esempio, il numero di risultati può essere molto alto. Ma comunque il modo migliore per capire tutto questo è quello di metterlo in esecuzione.
La struttura generale tramite blocchi è il seguente:
<div class="vinculos"> ...Aquí van la cadena de búsqueda y botones...</div> <div > <div>OTRAS OPCIONES DE BÚSQUEDA:<br /> ...Aquí van las opciones... </div> <div> ...Aquí se ponen los resultados de la búsqueda... </div> <div> ...Aquí va el índice de vínculos... </div> </div>
Stile CSS specifico per questo documento è:
div#indiceContenidos { overflow: hidden; height: 0; }div#indiceContenidos a { text-decoration: none; }div#vinculosIndice { display: none; }div#resultados { border: rgb(49, 99, 98) solid 1px; }div#resultados a { text-decoration: none; color: navy; }div#opcionesBusca { border: rgb(49, 99, 98) solid 1px; overflow: hidden; height: 0; }
Il contenitore con id="resultados" è in linea di principio contenuto vuoto, perché Ci sono dinamicamente i risultati di ogni ricerca. Il contenitore con class="vinculos" ha questa struttura:
<div class="vinculos"> Cadena: <input type="text" value="" size="40" onblur="patronear()" /> <input type="button" value="Buscar" onclick="buscar()" /> Encontrados: <em>0</em> <input type="button" value="Opciones" onclick="opciones()" /> <input type="button" value="Índice" onclick="indiceContenidos()" /> <div>...</div></div>
La casella di testo per la stringa di ricerca include un evento onblur In questo modo che quando si lascia tale elemento, il modello di ricerca viene aggiornato con patronear() funzioni, funzioni incluse nelle ricerche dei moduli. js. Il pulsante per avviare le chiamate di ricerca La funzione buscar(). Le altre funzioni sono opciones() E Mostrando la casella Opzioni e l’indice di contenuto totale, poiché entrambi i contenitori sono inizialmente nascosti come è stato dichiarato nel CSS. L’indice totale del contenuto con id="indiceContenidos" è nascosto con height:0 dobbiamo averlo caricato sulla pagina perché faremo la ricerca Iterano dagli elementi <a>, quindi anche se non vengono visualizzati sono presenti. Vediamo ora la struttura della casella delle opzioni:
<div> Conjuntivas:<input type="checkbox" /> Palabra completa:<input type="checkbox" /> Diferencia mayúsculas/minúsculas:<input type="checkbox" /> Patrón:<span class="monospace">/</span> <input type="text" value="" size="40" class="monospace" /> <span class="monospace">/</span> <input type="text" size="5" value="" class="monospace" /> <input type="button" value="Actualizar patrón" onclick="patronear()" /> Resultados máximos:<input type="text" value="100" size="5" />, número de búsquedas máximas:<input type="text" value="0" size="5" /> de un total de <span>0</span><br /> </div>
infine, il contenitore dei risultati (con id="resultados") Aspirapolvere Inizialmente e il contenitore dell’indice (con id="indiceContenidos") La sua struttura è stata già esposta nella sezione precedente.
il JavaScript per utilizzare il motore di ricerca interno
La struttura delle variabili globali e delle funzioni di questo modulo JavaScript è il seguente:
- variabili globali
-
inputPatron: un riferimento all’elemento per memorizzare il modello. -
inputOpcionesFlags: un riferimento all’elemento<input type="text">che memorizza le opzioni o i flag del modello. -
vinculos: una variabile che conterrà la raccolta di elementi<a>dell’indice. -
hasta: un intero che contiene inizialmente il numero di elementi di quell’indice. -
particulas: una variabile di tipo stringa che contiene un elenco di particelle (preposizioni, avverbi, ecc.) che verrà eliminato dalla stringa di ricerca.
-
- Funzioni
-
window.onload = function(): inizializza il cercatore con il carico della pagina. - : preparare il modello di ricerca.
-
function buscar(): cerca quel motivo. -
function opciones(): mostra o nascondi le opzioni della casella. -
function indiceContenidos(): mostra o nascondi l’indice dei contenuti.
-
/ ul>
Non ho intenzione di esporre il codice completo di questo JavaScript. Con i browser come Firefox puoi scaricare facilmente questo codice e consultarlo. La funzione di inizializzazione con il carico della pagina è semplicemente responsabile del riferimento alle variabili globali e riempire la raccolta di array o collegamento. Le funzioni che mostrano o nascondono i contenitori di opzioni o indici non hanno complessità. Vedremo le funzioni solo per preparare il modello e cercare.
Quando esci dalla casella di stringa di ricerca esegue l’evento onblur che chiama la funzione patronear(), che è responsabile della preparazione del modello.
function patronear() { document.getElementById("encontrados").innerHTML = 0; inputPatron.value = ""; var cadenaBusca = document.getElementById("cadBusca").value; var palabraCompleta = document.getElementById("palabraCompleta").checked; if (cadenaBusca != "") { //escapa caracteres reservados de expresiones regulares cadenaBusca = cadenaBusca.replace(/(\?\\\/\^\{\}\|])/g, "\\$1"); //elimina espacios al inicio o final cadenaBusca = cadenaBusca.replace(/^\s+|\s+$/g, ""); //suprime las preposiciones, artículos y otras palabras intermedias, es //decir rodeadas de un espacio por ambos lados. var patron = new RegExp("\\b(?:" + particulas + ")\\b", "gi"); cadenaBusca = cadenaBusca.replace(patron, " "); //Convierte más de un espacio en uno cadenaBusca = cadenaBusca.replace(/\s+/g, " "); //Quita los espacios iniciales y finales por haber partículas ahí cadenaBusca = cadenaBusca.replace(/^\s+|\s+$/g, ""); if ((cadenaBusca == "") || (cadenaBusca == " ")){ inputPatron.value = ""; } else { //reemplaza los espacios intermedios por la alternativa | o conjuntiva .*? //pero diferenciando si buscamos en palabra completa o no var conj = "\|" if (document.getElementById("conjuntiva").checked) { conj = ".*?"; } if (palabraCompleta){ cadenaBusca = cadenaBusca.replace(/\s+/g, "\\b" + conj + "\\b"); cadenaBusca = "\(?:\\b" + cadenaBusca + "\\b\)"; } else { cadenaBusca = cadenaBusca.replace(/\s+/g, conj); cadenaBusca = "\(?:" + cadenaBusca + "\)"; } inputPatron.value = cadenaBusca; var opciones = ""; var difMayusMinus = document.getElementById("caseMM").checked; if (!difMayusMinus) { opciones = opciones + "i"; } inputOpcionesFlags.value = opciones; } } }
Il modello che prepariamo ha due campi, uno con il Espressione regolare che verrà salvata nel <input type="text"> e che ci avessimo fatto riferimento nella variabile globale inputPatron, e dall’altro flag o modificatori Della espressione regolare che memorizziamo in <input type="text"> e che facciamo riferimento anche nella variabile globale inputOpcionesFlags. Queste variabili verranno quindi consultate nella funzione buscar().
Il modello è costruito sfuggendo i caratteri riservati di espressioni regolari e quindi eliminando le particelle usate frequentemente. È la variabile globale particulas contenente un elenco separato dalla barra verticale di preposizioni, avverbi, articoli e altre parole di frequentemente utilizzati nella lingua e che non contribuiscono nulla alla ricerca .Eliminiamo gli spazi all’inizio o alla fine della stringa di ricerca e convertiamo diversi spazi in uno. Se alla fine la catena contiene qualcosa di più di uno spazio, abbiamo costruito il modello.
In questo momento avremo una stringa di ricerca con parole separate da spazio. Se il <input type="checkbox" /> è disattivato è che cercheremo alcune di quelle parole. Costruiamo il modello che separa le alternative con la barra verticale (un dilemma). In un altro caso stiamo cercando tutte le parole ed è costruito separandoli con .*? equivalente a una congiuntiva. Quindi incorporiamo i delimitatori \b per la parola completa. Nella casella Bandiere, aggiungiamo l’opzione se la ricerca è in maiuscolo insensibile-minuscolo, cioè non differisce maiuscole minuscole.
Quando si lascia il Abbiamo già nella casella <input type="text"> Il modello e in <input type="text"> I Bandiere Quando viene premuto il pulsante corrispondente, eseguiamo buscar():
function buscar() { document.getElementById("encontrados").innerHTML = 0; var divResultados = document.getElementById("resultados"); divResultados.innerHTML = ""; var cadBusca = inputPatron.value; var opciones = inputOpcionesFlags.value; var maxBusca = 1 * document.getElementById("maxBusca").value; var maxResulta = 1 * document.getElementById("maxResulta").value; var maxResultaBase = maxResulta; var item = 0; if (cadBusca != "") { var patron = new RegExp(cadBusca, opciones); document.getElementById("iterTotal").innerHTML = hasta; if (maxBusca < hasta) { hasta = maxBusca; } for (var i=0; i<hasta; i++) { var cadena = getInnerText(vinculos); var resultado = cadena.match(patron) ; if (resultado != null) { item++; if (item <= maxResulta) { divResultados.innerHTML += ' <a href="' + vinculos.href + '">' + vinculos.innerHTML + '</a><br />'; } else { var men = ""; if (maxResulta == maxResultaBase) { men = " primeros "; } else { men = " siguientes "; } document.getElementById("encontrados").innerHTML = item; var mensaje = window.confirm("Se muestran los" + men + maxResultaBase + " resultados. ¿Continuar buscando?"); if (mensaje) { maxResulta += maxResultaBase; } else { break; } } } } } document.getElementById("encontrados").innerHTML = item;}
La variabile maxBusca limita il numero massimo di iterazioni nella collezione di collegamento. La variabile maxResulta controlla il numero di risultati da restituire. Quindi dichiareriamo l’espressione regolare con new RegExp(cadBusca, opciones). In questo caso usiamo una stringa in cadBusca, il pattern è stato costruito prima con la funzione patronear(), aggiungendo le bandiere. Il processo di ricerca consiste in iterali dalla raccolta dei collegamenti estraendo il testo interno di quegli elementi <a>. Lo facciamo con la funzione getInnerText() del modulo generale.js con funzioni che unificano il comportamento dei browser durante l’estrazione del testo interno di un elemento. Per questo è necessario collegare quel modulo sull’intestazione delle ricerche:
Se non si desidera incorporare quel modulo generale.js puoi individuare La funzione getInnerText() direttamente nel modulo cercato.js. Su quel testo interiore dell’elemento <a> applichiamo il modello di ricerca, ottenendo una serie di coincidenze nella variabile resultado. Controlliamo che il numero di risultati è inferiore a quello dichiarato di presentare (variabile maxResulta), nel qual caso accumulando con innerHTML dinamicamente Costruisci elementi di collegamento. Se supera maxResulta chiediamo all’utente se continuiamo Iterando dandogli la possibilità di rompere il ciclo.
Molti miglioramenti sono possibili, ma essenzialmente mi viene mostrato un Modo per effettuare un motore di ricerca interno con JavaScript. Il suo grande vantaggio è che funziona nel browser dell’utente, dove il ritorno di ritorno è più veloce e non consuma anche risorse del server. Gli svantaggi sono principalmente la necessità che l’utente abbia abilitato JavaScript e la dimensione del file di indice che deve essere trasferito dal server. Questo aspetto può essere migliorato se invece di fare un indice HTML l’abbiamo fatto con solo testo, ma ancora questo motore di ricerca sarà sempre limitato da una dimensione massima di quel file di indice. Non sembra il diritto di inviare il client un documento compreso il file di indice con dimensioni che superano troppo il 150kb troppo.
In questo momento ho implementato su questo sito un altro motore di ricerca basato su indici memorizzati come array serializzati come array serializzati come array serializzati nei file di testo e in esecuzione sul server esposto nell’argomento successivo. Ma continuo a mantenere questo motore di ricerca con JavaScript perché, indipendentemente dalla sua qualità, è un buon esercizio per imparare gli aspetti di JavaScript come Dom Management o Espressioni regolari.