Lições Interativas de Matemática e Ciências

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...

Uma expressão regular só é necessária para os URL que não vivem em elemento algum 🖖

A explicação antiga dava o crédito à maquinaria errada. Esta ferramenta entrega o seu markup ao próprio analisador de HTML do navegador — DOMParser — e depois limita-se a fazer-lhe perguntas: cada script[src], cada link de folha de estilos, cada elemento de imagem. É por isso que um aninhamento malformado não a descarrila. A expressão regular entra para a única tarefa que o analisador não consegue fazer: encontrar URL que não são atributo de nada, enterrados no texto de um script em linha ou dentro de um url(...) de CSS. Dois problemas diferentes, duas ferramentas diferentes — e saber qual é qual separa um extractor que funciona de um que quase funciona.

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.

Referências (2)

· Atualizado

Verificado com fontes publicadas. Correções bem-vindas. Política editorial · Correções

Todas as lições de Computação →

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>.