Structure de l’index dans les demandeurs qui traitent dans le client
si la recherche interne est basée sur un indice de mot qui n’est pas Très étendu, il est possible d’envoyer l’index au client et c’est le navigateur qui effectue le processus de recherche à l’aide de JavaScript et de la gestion DOM. Une solution consiste à créer un fichier texte plat avec l’index de mots-clés, à savoir ce que nous avons vu dans le sujet précédent:
...table 86tbody 86,12...
donc les mots pointe sur le numéros de document où ils se trouvent. À son tour, nous pouvons avoir un autre fichier d’index avec les URL:
...12 /ijk/lmn.html86 /abc/def/ghi.html...
Ceci peut être envoyé au client à l’aide de variables de type chaîne dans un fichier .js, car Exemple:
var indice = "...;table=86;tbody=86,12;...";var claves = "...;12=/ijk/lmn.html;...;86=/abc/def/ghi.html;...";
puis dans le navigateur, nous pourrions appliquer la fonction split() pour convertir ces chaînes dans les matières correspondantes et travailler sur eux.
Mais quand j’ai fait mon moteur de recherche avec JavaScript, je n’ai utilisé pas ce concept d’index de clé, mais j’ai construit l’index exclusivement à l’aide des en-têtes identifiés. Ceci est un exemple de HTML de l’index situé dans
<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>
est envoyé à l’intérieur du document, sous forme d’éléments HTML, situé dans le conteneur avec id="indiceContenidos" qui a initialement les propriétés de style overflow: hidden; height: 0; avec ce qui ne va pas être affiché à l’écran mais son contenu est présent. Ensuite, chaque page est enfermée dans un conteneur sous id="cabecera", où l’identifiant est le nom du document sans extension. Par conséquent, ce conteneur aura tous les liens vers les en-têtes du document cabecera.html. Chaque lien est également contenu dans un autre <div> pour la fournir avec stylish indenté.
Essentiation Une variable globale avec une collection d’éléments de l’index, action effectuée avec la charge de la page. Ensuite, l’utilisateur est à la recherche de cette collection en supprimant le texte intérieur de l’élément et en vérifiant la correspondance avec la chaîne de recherche. L’avantage de l’envoi de l’index au client en tant qu’éléments HTML est qu’il peut être utilisé directement comme index de contenu, ou plutôt, une table des matières, pour laquelle avec JavaScript, nous modifions les propriétés de style du conteneur avec id="indiceContenidos":
conten.style.overflow = "visible";conten.style.height = "auto";
Le grand avantage de ces moteurs de recherche avec JavaScript est qu’ils ne consomment pas de ressources serveur lors du traitement des recherches. Tout est fait dans le navigateur. Mais la taille est une limitation qui conditionne ces moteurs de recherche, donc pour un plus grand volume d’en-têtes, il ne serait plus efficace de l’envoyer au navigateur du client. Cette recherche comprend 862 liens vers toutes les en-têtes des 16 documents qui composent le glossaire XHTML + CSS. La recherche est ensuite composée de:
- document recherché.html de 152kb avec les liens vers les en-têtes.
- JavaScript recherche.js de 7kb pour gérer le processus de recherche.
- Style externe dans une partie du fichier XHTMLCSS-style.css. Ceci occupe 5 Ko mais sur le moteur de recherche est une quantité inférieure.
Dans ce qui suit, il est exposé car ce moteur de recherche fonctionne. Mais nous partons du fait que nous avons déjà construit l’index en fonction de la structure indiquée et que nous répétons à nouveau schématiquement:
<div> ... <div> ... <div><a>...</a></div> <div><a>...</a></div> ... </div> ... <div> ... <div><a>...</a></div> <div><a>...</a></div> ... </div> ... </div>
pour construire automatiquement cet index peut automatiquement Consultez l’outil d’un prochain sujet qui parle des index de construction. C’est un utilitaire qui vous permettra de fabriquer cet index basé sur les documents HTML sélectionnés, en enregistrant le code HTML généré dans un fichier texte. Sur cette page, il est expliqué comment utiliser cet outil.
Structure HTML-CSS du moteur de recherche avec JavaScript
visuellement notre moteur de recherche a cette apparence:
Il s’agit d’une zone de texte de la chaîne de recherche, d’un bouton pour lancer la recherche, une autre pour ouvrir les options inférieures et un bouton pour afficher le bouton indice. Options de recherche Vous permet de rechercher des billets contenant tous les mots ou juste un mot. De plus, seuls les mots complets peuvent également être recherchés et majuscules majuscules.
Il n’est pas pratique de montrer le modèle de recherche si ce moteur de recherche sera destiné à un site d’utilisation général. Mais comme ici l’objectif est de montrer tous les détails possibles, que le modèle de recherche est inclus. Donc, même l’utilisateur intéressé peut essayer d’autres modèles.Du point de vue, nous devons nous rappeler que ce moteur de recherche fonctionne dans le navigateur de l’utilisateur. Les erreurs par des motifs indues n’affecteront que le navigateur et non le serveur.
Enfin, il y a un limiteur pour le nombre maximal de Résultats, car pour certaines recherches comme paroles par exemple, le nombre de résultats peut être très élevé. Mais de toute façon, la meilleure façon de comprendre tout cela est de le mettre en exécution.
La structure générale par blocs est la suivante:
<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>
Spécifique style CSS pour ce document est le suivant:
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; }
Le conteneur avec id="resultados" est en principe le contenu vide, car Il y a de manière dynamique les résultats de chaque recherche. Le conteneur avec a cette structure:
<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 zone de texte de la chaîne de recherche comprend un événement onblur de telle sorte que lors de la sortie de cet élément, le motif de recherche est mis à jour avec les fonctions patronear() Fonctions incluses dans les recherches du module. JS. Le bouton pour démarrer les appels de recherche La fonction buscar(). Les autres fonctions sont opciones() e
montrant la zone d’options et l’indice de contenu total, car les deux conteneurs sont initialement cachés tels que ceux-ci ont été déclarés dans le CSS. L’indice de contenu total avecid="indiceContenidos"est caché avecheight:0Nous devons l’avoir chargée sur la page parce que nous allons faire la recherche iterano par les éléments , alors même s’ils ne sont pas affichés, ils sont présents. Voyons maintenant la structure de la boîte d’options:
<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>
Enfin, le conteneur de résultats (avec id="resultados") Vacuum Initialement et le conteneur d’index (avec id="indiceContenidos") sa structure a déjà été exposée dans la section précédente.
Le JavaScript pour utiliser le moteur de recherche interne
La structure des variables globales et des fonctions de ce module JavaScript est la suivante:
- variables globales
-
inputPatron: une référence à l’élément<input type="text">pour stocker le motif. -
inputOpcionesFlags: une référence à l’élément<input type="text">qui stocke les options ou les drapeaux du motif. -
vinculos: une variable qui contiendra la collection d’éléments de l’index. -
hasta: un entier qui contient initialement le nombre d’éléments de cet indice. -
particulas: une variable de type chaîne contenant une liste de particules (prépositions, adverbes, etc.) qui seront supprimées de la chaîne de recherche.
-
- Fonctions
-
window.onload = function(): Initialiser le Finder avec la charge de la page. - : Préparez le modèle de recherche.
-
function buscar(): Recherchez ce modèle. -
function opciones(): Afficher ou masquer les options de la boîte. -
function indiceContenidos(): Afficher ou masquer l’index de contenu.
-
Je ne vais pas exposer le code complet de ce JavaScript. Avec des navigateurs comme Firefox, vous pouvez télécharger ce code facilement et le consulter. La fonction d’initialisation avec la charge de la page est simplement responsable de la référencement des variables globales et de remplir la collection de matrices ou de liaisons. Les fonctions qui montrent ou masquent les conteneurs d’options ou d’index n’ont aucune complexité. Nous ne verrons que les fonctions pour préparer le modèle et la recherche.
Lorsque nous sortons de la zone de la chaîne de recherche exécute l’événement onblur qui appelle la fonction patronear(), qui est responsable de la préparation du motif.
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; } } }
Le modèle que nous préparons a deux champs, un avec le expression régulière qui sera sauvegardée dans <input type="text"> et que nous avions référencé dans la variable globale inputPatron, et sur les autres drapeaux ou modificateurs de l’expression régulière que nous stockons dans <input type="text"> et que nous faisons également référence à la variable globale inputOpcionesFlags. Ces variables seront alors consultées dans la fonction buscar().
Le motif est construit en évacuant les caractères réservés d’expressions régulières, puis éliminant les particules fréquemment utilisées. Il s’agit de la variable globale particulas contenant une liste séparée par la barre verticale des prépositions, des adverbes, des articles et d’autres mots de fréquences utilisées dans la langue et qu’ils ne contribuent rien à la recherche. .Nous éliminons les espaces au début ou à la fin de la chaîne de recherche et convertissons plusieurs espaces en un. Si, à la fin, la chaîne contient quelque chose de plus qu’un espace, nous avons construit le motif.
À ce moment-là, nous aurons une chaîne de recherche avec des mots séparés par l’espace. Si le <input type="checkbox" /> est désactivé est que nous allons chercher certains de ces mots. Nous construisons le modèle séparant les alternatives avec la barre verticale (un dilemme). Dans un autre cas, nous recherchons tous les mots et est construit en les séparant avec .*? équivalent à une conjonctive. Ensuite, nous incorporons les délimiteurs \b pour un mot complet. Dans la case Flags, nous ajoutons l’option Si la recherche est insensible majuscule-minuscule, c’est-à-dire qu’elle ne différente pas de majuscule minuscule.
lorsque vous quittez la Nous avons déjà dans la case <input type="text"> Le motif et dans le <input type="text"> Les drapeaux Lorsque le bouton correspondant est enfoncé, nous exécutons l’exécution de 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 variable maxBusca limite le nombre maximum d’itérations dans la collection de liaisons. La variable maxResulta contrôle le nombre de résultats à renvoyer. Ensuite, nous déclarons l’expression régulière avec new RegExp(cadBusca, opciones). Dans ce cas, nous utilisons une chaîne dans cadBusca, le motif construit avant avec la fonction patronear(), ajoutant les drapeaux. Le processus de recherche consiste en itérer par la collection de liens en extrayant le texte interne de ces éléments <a>. Nous le faisons avec la fonction getInnerText() du module général.js avec des fonctions qui unifient le comportement des navigateurs lors de l’extraction du texte interne d’un élément. Pour cela, il est nécessaire de relier ce module à l’en-tête des recherches:
Si vous ne souhaitez pas intégrer ce module général.js Vous pouvez localiser La fonction getInnerText() directement dans le module recherché.js. Sur ce texte interne de l’élément Nous appliquons le modèle de recherche, obtenant une gamme de coïncidences dans la variable resultado. Nous contrôlons que le nombre de résultats est inférieur à ceux déclaré à présenter (variable maxResulta), auquel cas nous nous accumulons avec innerHTML dynamiquement Construire des éléments de liaison. Si vous dépassez maxResulta Nous demandons à l’utilisateur si nous continuons Iterando lui donnant la possibilité de casser la boucle.
De nombreuses améliorations sont possibles, mais nous avons essentiellement montré un façon de faire un moteur de recherche interne avec JavaScript. Son excellent avantage est qu’il fonctionne dans le navigateur de l’utilisateur, où le rendement de retour est plus rapide et ne consomme pas non plus les ressources du serveur. Les inconvénients sont principalement la nécessité pour l’utilisateur d’avoir activé JavaScript et la taille du fichier d’index qui doit être transférée du serveur. Cet aspect peut être amélioré si, au lieu de faire un index HTML, nous l’avons fait avec seulement du texte, mais ce moteur de recherche sera toujours limité par une taille maximale de ce fichier d’index. Il ne semble pas non plus d’envoyer le client un document comprenant le fichier d’index avec une taille qui dépasse trop de 150 Ko.
À ce stade, j’ai mis en œuvre sur ce site un autre moteur de recherche basé sur des index stockés sous forme de tableaux Serialized. dans les fichiers texte et exécuté sur le serveur exposé dans le sujet suivant. Mais je garde toujours ce moteur de recherche avec JavaScript car, quelle que soit sa qualité, c’est un bon exercice d’apprendre des aspects de JavaScript en tant que gestion DOM ou expressions régulières.