Lecciones Interactivas de Matemáticas y Ciencias (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Extractor de Recursos HTML, Imágenes y Markdown

Analiza HTML en bruto en busca de scripts, hojas de estilo, imágenes y enlaces. Incluye URLs de imágenes de fondo en línea de atributos style y etiquetas style — también extrae el texto visible de la página como Markdown limpio, útil para leer artículos detrás de paywalls simples del lado del cliente.

Cargando simulación interactiva...

Una expresión regular solo hace falta para las URL que no viven en ningún elemento 🖖

La explicación anterior atribuía el mérito a la maquinaria equivocada. Esta herramienta entrega tu marcado al propio analizador de HTML del navegador — DOMParser — y luego simplemente le hace preguntas: cada script[src], cada link de hoja de estilos, cada elemento de imagen. Por eso un anidamiento mal formado no la descarrila. La expresión regular entra para la única tarea que el analizador no puede hacer: encontrar URL que no son atributo de nada, enterradas en el texto de un script en línea o dentro de un url(...) de CSS. Dos problemas distintos, dos herramientas distintas: y saber cuál es cuál separa un extractor que funciona de uno que casi funciona.

Las imágenes se esconden en más que etiquetas img 🖖

Mucha gente cree que una imagen web vive siempre en una etiqueta `<img>`, pero los navegadores también pintan imágenes a partir de reglas CSS `background-image`, listas responsivas `srcset`, etiquetas `<meta>` de vista previa e incluso arrays dentro de JavaScript. Esta herramienta rastrea todos esos lugares a la vez. La conclusión práctica: una foto que ves claramente en pantalla puede no tener ninguna etiqueta `<img>` — la dibuja una hoja de estilos, y por eso a veces falla 'clic derecho, guardar imagen'.

Un muro de pago blando oculta texto ya enviado 🖖

Muchos muros de 'suscríbete para seguir leyendo' son puro teatro. El artículo completo suele venir ya en el HTML de la página y solo queda tapado por una superposición o un desenfoque — las palabras cruzaron la red antes de que te pidieran pagar. Como este extractor lee el texto visible directamente del marcado analizado y lo convierte en Markdown, ese contenido reaparece intacto. Es un recordatorio de que ocultar algo con CSS no es lo mismo que retenerlo.

Referencias (2)

· Actualizado

Contrastado con fuentes publicadas. Se agradecen correcciones. Política editorial · Correcciones

Todas las lecciones de Informática →

Problemas de ejemplo

  • galería responsiva - Página de aterrizaje con un bloque JSON-LD ImageObject de schema.org y un <img srcset> responsivo: muestra la extracción de imágenes a partir de datos estructurados, además de la deduplicación de variantes de resolución de una misma imagen.
  • fondos CSS - Página cuyas únicas imágenes están en declaraciones CSS background-image, una dentro de un bloque <style> y otra en un atributo style en línea: el tipo de recurso que un simple escaneo de <img> pasaría por alto.
  • carrusel generado por JS - Carrusel de imágenes construido enteramente en tiempo de ejecución por JavaScript, sin etiquetas <img> en el marcado: muestra cómo el extractor recupera las URL de las imágenes a partir de un simple arreglo literal de JS dentro de un bloque <script>.