Buscadores web en javaScript

Por redaccion | Comentarios (0) | Trackbacks (0)

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.

  1. <script language=”javascript” type=”text⁄javascript”>
  2. caracter = new Object(5)
  3. caracter[0] = ’á’
  4. caracter[1] = ’é’
  5. caracter[2] = ’í’
  6. caracter[3] = ’ó’
  7. caracter[4] = ’ú’
  8. caracter_nuevo = new Object(5)
  9. caracter_nuevo[0] = ’a’
  10. caracter_nuevo[1] = ’e’
  11. caracter_nuevo[2] = ’i’
  12. caracter_nuevo[3] = ’o’
  13. caracter_nuevo[4] = ’u’
  14. caracter_nuevo2 = new Object(5)
  15. caracter_nuevo2[0] = ’[áa]‘
  16. caracter_nuevo2[1] = ’[ée]‘
  17. caracter_nuevo2[2] = ’[íi]‘
  18. caracter_nuevo2[3] = ’[óo]‘
  19. caracter_nuevo2[4] = ’[úu]‘
  20. var BaseDatos = new Array(
  21. )
  22. var totales     ⁄⁄numero de entradas encontradas
  23. var Pagina      ⁄⁄string que contendra la pagina a mostrar
  24. var Entradas        ⁄⁄string que va guardando las entrdas encontradas
  25. var clave1, clave2  ⁄⁄palabra a buscar
  26. ⁄⁄obtiene longitud de la base de datos
  27. var longitud = BaseDatos.length
  28. function Buscaclave(FormBusqueda, desde) {
  29. ⁄⁄busca la palabra clave en el array de palabras clave
  30. ⁄⁄devuelve -1 si no hay coincidencias
  31. var index = -1
  32. ⁄⁄recorre el array en busca de la palabra clave (en cualquier parte)
  33. for (x = desde; x < longitud; x++) {
  34. if ( (BaseDatos[x].search(clave1) != -1) || (BaseDatos[x].search(clave2) != -1) ) {
  35. index = x
  36. break
  37. }
  38. }
  39. return index
  40. }
  41. function IniciaPagina(FormBusqueda) {
  42. ⁄⁄crea la pagina a visualizar y la muestra
  43. ⁄⁄cabecera y apertura cuerpo
  44. Pagina =    ’<!DOCTYPE HTML PUBLIC ”-⁄⁄DTD HTML 4.01 Transitional⁄⁄EN” ”http:⁄⁄www.disenoweb.org⁄TR⁄html4⁄loose.dtd”>\n’ +
  45. ‘<html><head>\n’ +
  46. ‘<title>Resultados de la busqueda<⁄title>\n’ +
  47. ‘<meta HTTP-EQUIV=”Content-Type” CONTENT=”text⁄html; charset=iso-8859-1″>\n’ +
  48. ‘<meta NAME=”AUTHOR” CONTENT=”Mensaje”>\n’ +
  49. ‘<link rel=”stylesheet” type=”text⁄css” href=”⁄Mensaje”><⁄head>\n’ +
  50. ‘<body>\n’ +
  51. ‘<h3>Resultados de la búsqueda<⁄h3>\n’
  52. if (totales != 0)
  53. Pagina += ’<p>Se han encontrado ’ + totales + ’ resultados que contienen la palabra <strong class=”rojo”>’ + FormBusqueda.palabra.value + ’<⁄strong>:<⁄p>\n’
  54. else
  55. Pagina += ’<p>No se han encontrado resultados para la palabra <strong class=”rojo”>’ + FormBusqueda.palabra.value + ’<⁄strong>.<⁄p>\n’
  56. }
  57. function TerminaPagina() {
  58. ⁄⁄final cuerpo
  59. Pagina +=   ’<⁄body><⁄html>\n’
  60. }
  61. function CreaEntradas(indice) {
  62. var CadenasEntrada
  63. ⁄⁄divide la cadena de resultados en subcadenas y escribe los resultados
  64. CadenasEntrada = BaseDatos[indice].split(“;”)
  65. Entradas += ’<p><a href=”‘ + CadenasEntrada[0] + ’.html” target=”_self”>’ + CadenasEntrada[1] + ’<⁄a><br>\n’
  66. Entradas += CadenasEntrada[2] + ’<⁄p>\n’
  67. }
  68. function MuestraPagina(Pagina) {
  69. ⁄⁄muestra el contenido del display
  70. window.document.open()
  71. window.document.write(Pagina)
  72. window.document.close()
  73. }
  74. function IniciaBuscador(FormBusqueda) {
  75. ⁄⁄inicia variables globales
  76. var desde = 0
  77. totales = 0
  78. Pagina = ”"
  79. Entradas = ”"
  80. ⁄⁄clave busqueda
  81. var palabraClave = document.forms["FormularioBusqueda"].palabra.value
  82. ⁄⁄detiene busqueda si palabra clave vacia
  83. if ( palabraClave == ”" ) {
  84. alert(“¡Introduzca cadena de búsqueda!”)
  85. return
  86. }
  87. ⁄⁄elimina acentos
  88. var palabra_sin = elimina_especiales(palabraClave)
  89. ⁄⁄obtiene la expresion regular para la busqueda (global e ignorando case)
  90. clave1 = new RegExp(palabraClave, ”gi”)
  91. clave2 = new RegExp(palabra_sin, ”gi”)
  92. ⁄⁄inicia variables locales
  93. var indice = -1
  94. ⁄⁄busca entrada de pagina que contenga la clave
  95. do {
  96. indice = Buscaclave(FormBusqueda, indice + 1)
  97. if (indice != -1) {
  98. CreaEntradas(indice)
  99. totales++
  100. }
  101. } while (indice != -1)
  102. ⁄⁄escribe pagina de resultados
  103. IniciaPagina(FormBusqueda)
  104. Pagina += Entradas
  105. TerminaPagina()
  106. ⁄⁄abre una ventana y escribe los resultados
  107. MuestraPagina(Pagina)
  108. }
  109. ⁄⁄SUSTITUYE TODAS LAS OCURRENCIAS DE UN CARACTER UNA CADENA POR OTRO CARACTER
  110. function sustituye_caracter(cadena, caracter, nuevo_caracter) {
  111. var longitud, indice
  112. longitud = cadena.length
  113. indice = cadena.indexOf(caracter)
  114. while ( (indice != -1) && (cadena.charAt(indice + 1) != ’]') ) {
  115. cadena = cadena.substring(0, indice) + nuevo_caracter + cadena.substring(indice + 1, longitud + 1)
  116. indice = cadena.indexOf(caracter, indice)
  117. }
  118. return cadena
  119. }
  120. ⁄⁄ELIMINA CARACTERES ESPECIALES
  121. function elimina_especiales(cadena) {
  122. ⁄⁄elimina caracteres con acento
  123. for (x = 0; x < 5; x++) {
  124. cadena = sustituye_caracter(cadena, caracter[x], caracter_nuevo[x])
  125. }
  126. ⁄⁄sustituye las vocales por una expresion regular para ignorar los acentos
  127. for (x = 0; x < 5; x++) {
  128. cadena = sustituye_caracter(cadena, caracter_nuevo[x], caracter_nuevo2[x])
  129. }
  130. return cadena
  131. }
  132. <⁄script>

Debe añadir el siguiente código a la página HTML, entre <body> y </body>:

  1. <form name=”FormularioBusqueda”>
  2. <p><small>Palabra clave:<⁄small><br>
  3. <input type=”text” name=”palabra” size=”25″>
  4. <input type=”button” value=”Buscar” name=”buscar” onClick=”IniciaBuscador(this.form)”>
  5. <input type=”reset” value=”Borrar” name=”borrar”><⁄p>
  6. <⁄form>

 


¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscríbes a mi feed y obtienes los artículos como este enviados automáticamente cada día hacia tu lector de feeds.

Etiquetas: ,
Topics: javascript

No hay comentarios todavía.

Deja un comentario

Saltos de línea automáticos, la dirección de email nunca será publicada, HTML permitido: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

(requerido)

(requerido)