Skip to content

Instantly share code, notes, and snippets.

@seoutopico
Last active April 10, 2024 14:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save seoutopico/8cfbbfd6a73c8ad6fc3f8a92a0fab962 to your computer and use it in GitHub Desktop.
Save seoutopico/8cfbbfd6a73c8ad6fc3f8a92a0fab962 to your computer and use it in GitHub Desktop.

Buscador de Palabras en Encabezados

Este script de JavaScript permite buscar una palabra específica en los encabezados (etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>) de una página web y muestra un resumen de los resultados encontrados.

Funcionalidad

  1. Solicita al usuario que ingrese una palabra para buscar.
  2. Obtiene todos los encabezados de la página web.
  3. Busca la palabra ingresada por el usuario en el texto de cada encabezado.
  4. Genera un resumen que muestra:
    • El número total de encabezados de cada tipo (h1, h2, h3, etc.).
    • El número de encabezados de cada tipo que contienen la palabra buscada.
  5. Muestra los encabezados encontrados en forma de tabla en la consola del navegador.
  6. Muestra el resumen generado en la consola del navegador.

Cómo funciona

El script consta de tres funciones principales:

  1. obtenerEncabezados(): Obtiene todos los encabezados de la página web utilizando document.querySelectorAll() y los convierte en un array de objetos que contienen el ID, tipo, texto y un indicador de si contienen o no la palabra buscada.

  2. buscarPalabra(titulos, palabra): Recibe el array de encabezados y la palabra a buscar. Itera sobre cada encabezado y actualiza el indicador contienePalabra si el texto del encabezado contiene la palabra buscada (sin distinguir mayúsculas y minúsculas).

  3. obtenerResumen(titulos, palabra): Recibe el array de encabezados y la palabra buscada. Genera un objeto resumen que contiene dos propiedades: totales y conPalabra. Cada una de estas propiedades es un objeto que almacena el recuento de encabezados de cada tipo (h1, h2, h3, etc.).

Finalmente, el script muestra los encabezados encontrados en forma de tabla y el resumen generado en la consola del navegador.

Uso

  1. Copia el código JavaScript en un archivo o en un Gist de GitHub.
  2. En tu navegador web, abre la página en la que deseas buscar los encabezados.
  3. Abre la consola del navegador (generalmente con F12 o Ctrl+Shift+I en la mayoría de los navegadores).
  4. Pega el código JavaScript en la consola y presiona Enter para ejecutarlo.
  5. Ingresa la palabra que deseas buscar cuando se te solicite.
  6. Los resultados se mostrarán en la consola del navegador.

Ten en cuenta que este script debe ejecutarse en el contexto de una página web, ya que accede al DOM de la página para buscar los encabezados.

image

javascript:(function(){function obtenerEncabezados(){const encabezados=Array.from(document.querySelectorAll("h1,h2,h3,h4,h5,h6"));return encabezados.map((encabezado,indice)=>{return{id:indice+1,tipo:encabezado.tagName.toLowerCase(),texto:encabezado.textContent,contienePalabra:false}})}function buscarPalabra(titulos,palabra){titulos.forEach(titulo=>{titulo.contienePalabra=titulo.texto.toLowerCase().includes(palabra.toLowerCase())})}function obtenerResumen(titulos,palabra){const resumen={totales:{},conPalabra:{}};titulos.forEach(titulo=>{const tipo=titulo.tipo;resumen.totales[tipo]=resumen.totales[tipo]?resumen.totales[tipo]+1:1;if(titulo.contienePalabra){resumen.conPalabra[tipo]=resumen.conPalabra[tipo]?resumen.conPalabra[tipo]+1:1}});return resumen}const palabra=prompt("Introduzca la palabra a buscar:");const titulos=obtenerEncabezados();buscarPalabra(titulos,palabra);const resumen=obtenerResumen(titulos,palabra);console.table(titulos,["id","tipo","texto","contienePalabra"]);console.log("**Resumen**");console.log("Totales:",resumen.totales);console.log("Con palabra:",resumen.conPalabra)})();
javascript:(function()%7Bvar%20headers%20%3D%20document.querySelectorAll('h1%2C%20h2%2C%20h3%2C%20h4%2C%20h5%2C%20h6')%3B%20for%20(var%20i%20%3D%200%3B%20i%20%3C%20headers.length%3B%20i%2B%2B)%20%7B%20headers%5Bi%5D.style.color%20%3D%20'red'%3B%20var%20level%20%3D%20headers%5Bi%5D.tagName.toLowerCase()%3B%20var%20levelSpan%20%3D%20document.createElement('span')%3B%20levelSpan.style.color%20%3D%20'black'%3B%20levelSpan.style.fontWeight%20%3D%20'bold'%3B%20levelSpan.textContent%20%3D%20%22%20(%22%20%2B%20level%20%2B%20%22)%22%3B%20headers%5Bi%5D.appendChild(levelSpan)%3B%20%7D%7D)()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment