Extrator de Recursos HTML, Imagens e Markdown

Analisa HTML em bruto à procura de scripts, folhas de estilo, imagens e links. Inclui URLs de imagens de fundo inline a partir de atributos style e tags style — também extrai o texto visível da página como Markdown limpo, útil para ler artigos por trás de paywalls simples do lado do cliente.

A carregar a simulação interativa...

Algorithmic Parsing of Document Object Models 🖖

Extracting embedded assets from HTML requires recursive traversal of the Document Object Model tree structure. By utilizing precise regular expressions and tag-specific targeting, the algorithm segregates image URIs and structural elements. It then algorithmically converts hierarchical nodes into equivalent Markdown syntax. This systematic reduction process efficiently transforms a complex, nested presentation language into a streamlined, logically ordered plain-text mathematical structure.

Imagens se escondem além das tags img 🖖

Muitos acham que uma imagem da web vive sempre em uma tag `<img>`, mas os navegadores também pintam imagens a partir de regras CSS `background-image`, listas responsivas `srcset`, tags `<meta>` de pré-visualização e até arrays dentro de JavaScript. Esta ferramenta vasculha todos esses lugares de uma só vez. A conclusão prática: uma foto que você vê claramente na tela pode não ter nenhuma tag `<img>` — ela é desenhada por uma folha de estilos, e por isso 'clicar com o botão direito, salvar imagem' às vezes falha.

Um paywall leve esconde texto já enviado 🖖

Muitos muros de 'assine para continuar' são puro teatro. O artigo completo costuma vir já no HTML da página e apenas fica coberto por uma sobreposição ou desfoque — as palavras cruzaram a rede antes de você ser convidado a pagar. Como este extrator lê o texto visível direto da marcação analisada e o converte em Markdown, esse conteúdo reaparece intacto. É um lembrete de que esconder algo com CSS não é o mesmo que retê-lo.

Problemas de exemplo

galeria responsiva - Landing page com um bloco JSON-LD ImageObject do schema.org e um <img srcset> responsivo — mostra a extração de imagens a partir de dados estruturados, além da deduplicação de variantes de resolução da mesma imagem.
fundos CSS - Página cujas únicas imagens estão em declarações CSS background-image — uma dentro de um bloco <style>, outra em um atributo style inline — o tipo de recurso que uma varredura simples por <img> deixaria passar.
carrossel gerado por JS - Slider de imagens construído inteiramente em runtime por JavaScript, sem nenhuma tag <img> no markup — mostra como o extrator recupera URLs de imagens a partir de um array literal JS simples dentro de um bloco <script>.