Buscadores web en javaScript
JavaScript permite crear un motor de búsqueda básico, para diseño web potente y vistoso. Este buscador implementa busquedas en el titulo, en la descripción de las páginas y en las palabras clave. Para ello, esta información debe codificarse en el propio script, en un array. Su estructura es muy sencilla: cada página de tu sitio web es un elemento del array BaseDatos.
- <script language=”javascript” type=”text⁄javascript”>
- caracter = new Object(5)
- caracter[0] = ’á’
- caracter[1] = ’é’
- caracter[2] = ’í’
- caracter[3] = ’ó’
- caracter[4] = ’ú’
- caracter_nuevo = new Object(5)
- caracter_nuevo[0] = ’a’
- caracter_nuevo[1] = ’e’
- caracter_nuevo[2] = ’i’
- caracter_nuevo[3] = ’o’
- caracter_nuevo[4] = ’u’
- caracter_nuevo2 = new Object(5)
- caracter_nuevo2[0] = ’[áa]‘
- caracter_nuevo2[1] = ’[ée]‘
- caracter_nuevo2[2] = ’[íi]‘
- caracter_nuevo2[3] = ’[óo]‘
- caracter_nuevo2[4] = ’[úu]‘
- var BaseDatos = new Array(
- )
- var totales ⁄⁄numero de entradas encontradas
- var Pagina ⁄⁄string que contendra la pagina a mostrar
- var Entradas ⁄⁄string que va guardando las entrdas encontradas
- var clave1, clave2 ⁄⁄palabra a buscar
- ⁄⁄obtiene longitud de la base de datos
- var longitud = BaseDatos.length
- function Buscaclave(FormBusqueda, desde) {
- ⁄⁄busca la palabra clave en el array de palabras clave
- ⁄⁄devuelve -1 si no hay coincidencias
- var index = -1
- ⁄⁄recorre el array en busca de la palabra clave (en cualquier parte)
- for (x = desde; x < longitud; x++) {
- if ( (BaseDatos[x].search(clave1) != -1) || (BaseDatos[x].search(clave2) != -1) ) {
- index = x
- break
- }
- }
- return index
- }
- function IniciaPagina(FormBusqueda) {
- ⁄⁄crea la pagina a visualizar y la muestra
- ⁄⁄cabecera y apertura cuerpo
- Pagina = ’<!DOCTYPE HTML PUBLIC ”-⁄⁄DTD HTML 4.01 Transitional⁄⁄EN” ”http:⁄⁄www.disenoweb.org⁄TR⁄html4⁄loose.dtd”>\n’ +
- ‘<html><head>\n’ +
- ‘<title>Resultados de la busqueda<⁄title>\n’ +
- ‘<meta HTTP-EQUIV=”Content-Type” CONTENT=”text⁄html; charset=iso-8859-1″>\n’ +
- ‘<meta NAME=”AUTHOR” CONTENT=”Mensaje”>\n’ +
- ‘<link rel=”stylesheet” type=”text⁄css” href=”⁄Mensaje”><⁄head>\n’ +
- ‘<body>\n’ +
- ‘<h3>Resultados de la búsqueda<⁄h3>\n’
- if (totales != 0)
- Pagina += ’<p>Se han encontrado ’ + totales + ’ resultados que contienen la palabra <strong class=”rojo”>’ + FormBusqueda.palabra.value + ’<⁄strong>:<⁄p>\n’
- else
- Pagina += ’<p>No se han encontrado resultados para la palabra <strong class=”rojo”>’ + FormBusqueda.palabra.value + ’<⁄strong>.<⁄p>\n’
- }
- function TerminaPagina() {
- ⁄⁄final cuerpo
- Pagina += ’<⁄body><⁄html>\n’
- }
- function CreaEntradas(indice) {
- var CadenasEntrada
- ⁄⁄divide la cadena de resultados en subcadenas y escribe los resultados
- CadenasEntrada = BaseDatos[indice].split(“;”)
- Entradas += ’<p><a href=”‘ + CadenasEntrada[0] + ’.html” target=”_self”>’ + CadenasEntrada[1] + ’<⁄a><br>\n’
- Entradas += CadenasEntrada[2] + ’<⁄p>\n’
- }
- function MuestraPagina(Pagina) {
- ⁄⁄muestra el contenido del display
- window.document.open()
- window.document.write(Pagina)
- window.document.close()
- }
- function IniciaBuscador(FormBusqueda) {
- ⁄⁄inicia variables globales
- var desde = 0
- totales = 0
- Pagina = ”"
- Entradas = ”"
- ⁄⁄clave busqueda
- var palabraClave = document.forms["FormularioBusqueda"].palabra.value
- ⁄⁄detiene busqueda si palabra clave vacia
- if ( palabraClave == ”" ) {
- alert(“¡Introduzca cadena de búsqueda!”)
- return
- }
- ⁄⁄elimina acentos
- var palabra_sin = elimina_especiales(palabraClave)
- ⁄⁄obtiene la expresion regular para la busqueda (global e ignorando case)
- clave1 = new RegExp(palabraClave, ”gi”)
- clave2 = new RegExp(palabra_sin, ”gi”)
- ⁄⁄inicia variables locales
- var indice = -1
- ⁄⁄busca entrada de pagina que contenga la clave
- do {
- indice = Buscaclave(FormBusqueda, indice + 1)
- if (indice != -1) {
- CreaEntradas(indice)
- totales++
- }
- } while (indice != -1)
- ⁄⁄escribe pagina de resultados
- IniciaPagina(FormBusqueda)
- Pagina += Entradas
- TerminaPagina()
- ⁄⁄abre una ventana y escribe los resultados
- MuestraPagina(Pagina)
- }
- ⁄⁄SUSTITUYE TODAS LAS OCURRENCIAS DE UN CARACTER UNA CADENA POR OTRO CARACTER
- function sustituye_caracter(cadena, caracter, nuevo_caracter) {
- var longitud, indice
- longitud = cadena.length
- indice = cadena.indexOf(caracter)
- while ( (indice != -1) && (cadena.charAt(indice + 1) != ’]') ) {
- cadena = cadena.substring(0, indice) + nuevo_caracter + cadena.substring(indice + 1, longitud + 1)
- indice = cadena.indexOf(caracter, indice)
- }
- return cadena
- }
- ⁄⁄ELIMINA CARACTERES ESPECIALES
- function elimina_especiales(cadena) {
- ⁄⁄elimina caracteres con acento
- for (x = 0; x < 5; x++) {
- cadena = sustituye_caracter(cadena, caracter[x], caracter_nuevo[x])
- }
- ⁄⁄sustituye las vocales por una expresion regular para ignorar los acentos
- for (x = 0; x < 5; x++) {
- cadena = sustituye_caracter(cadena, caracter_nuevo[x], caracter_nuevo2[x])
- }
- return cadena
- }
- <⁄script>
Debe añadir el siguiente código a la página HTML, entre <body> y </body>:
- <form name=”FormularioBusqueda”>
- <p><small>Palabra clave:<⁄small><br>
- <input type=”text” name=”palabra” size=”25″>
- <input type=”button” value=”Buscar” name=”buscar” onClick=”IniciaBuscador(this.form)”>
- <input type=”reset” value=”Borrar” name=”borrar”><⁄p>
- <⁄form>
Lectura de parametros
Para determinados efectos es muy útil pasar parámetros a un página HTML. Para un ejemplo de desarrollo web típico es la necesidad de mostrar imágenes diferentes en una página: pude pasar el nombre de la imagen y su ancho a una plantilla generérica.
- <script language=”javascript” type=”text⁄javascript”>
- function getVar(nomb){
- var url = document.location.href
- if ( url.indexOf(nomb) != -1 ) {
- posiBeg = url.indexOf(“=”, url.indexOf(nomb))
- barre = url.indexOf(“&”, posiBeg)
- posiEnd = (barre != -1 ? barre : url.length)
- return url.substring(posiBeg + 1,posiEnd)
- } else {
- ⁄⁄informa de la ausencia del parametro
- return ’Parámetro no encontrado.’
- }
- }
- ⁄⁄Recuperacion de los valores de un parametro
- ⁄⁄(modificar segun nombre del parametro)
- ⁄⁄ var valor = getVar(‘NombreParametro’)
- <⁄script>
Debe añadir el siguiente código a la página HTML, entre <body> y </body>:
- <p>
- <a href=”⁄ejemplos⁄aportaciones⁄parametros.html?nombre=ElCodigo&seccion=JavaScript”>
- Enlace a página con paso de parámetros
- <⁄a>
- <⁄p>
