Leçons Interactives de Mathématiques et Sciences

Extracteur de ressources HTML, images et Markdown

Analyse du HTML brut à la recherche de scripts, feuilles de style, images et liens. Inclut les URLs d'images d'arrière-plan en ligne provenant des attributs style et des balises style — extrait aussi le texte visible de la page en Markdown propre, pratique pour lire des articles derrière de simples paywalls côté client.

Chargement de la simulation interactive...

Une expression régulière ne sert que pour les URL qui n’habitent aucun élément 🖖

L’ancienne explication créditait la mauvaise machinerie. Cet outil confie votre balisage à l’analyseur HTML du navigateur lui-même — DOMParser — puis lui pose simplement des questions : chaque script[src], chaque link de feuille de style, chaque élément image. C’est pourquoi une imbrication mal formée ne le fait pas dérailler. L’expression régulière intervient pour la seule tâche que l’analyseur ne peut pas faire : trouver les URL qui ne sont l’attribut de rien, enfouies dans le texte d’un script en ligne ou dans un url(...) CSS. Deux problèmes différents, deux outils différents — et savoir lequel est lequel sépare un extracteur qui marche d’un extracteur qui marche presque.

Les images se cachent au-delà des balises img 🖖

Beaucoup pensent qu'une image web réside toujours dans une balise `<img>`, mais les navigateurs peignent aussi des images à partir de règles CSS `background-image`, de listes responsives `srcset`, de balises `<meta>` d'aperçu et même de tableaux dans du JavaScript. Cet outil ratisse tous ces endroits d'un coup. À retenir : une photo bien visible à l'écran peut n'avoir aucune balise `<img>` — elle est dessinée par une feuille de style, ce qui explique que 'clic droit, enregistrer l'image' échoue parfois.

Un mur payant léger cache un texte déjà envoyé 🖖

Beaucoup de murs 'abonnez-vous pour continuer' sont du pur théâtre. L'article complet est généralement déjà livré dans le HTML de la page et seulement recouvert par une surcouche ou un flou — les mots ont traversé le réseau avant qu'on ne vous demande de payer. Comme cet extracteur lit le texte visible directement dans le balisage analysé et le convertit en Markdown, ce contenu réapparaît intact. Cacher quelque chose avec du CSS n'est pas la même chose que le retenir.

Références (2)

· Mis à jour

Vérifié sur des sources publiées. Corrections bienvenues. Politique éditoriale · Corrections

Toutes les leçons : Informatique →

Exemples de problèmes

  • galerie responsive - Page d'accueil avec un bloc JSON-LD schema.org ImageObject et un <img srcset> responsive — illustre l'extraction d'images à partir de données structurées ainsi que la déduplication des variantes de résolution d'une même image.
  • arrière-plans CSS - Page dont les seules images se trouvent dans des déclarations CSS background-image — l'une dans un bloc <style>, l'autre dans un attribut style en ligne — le type de ressource qu'un simple scan d'<img> manquerait.
  • carrousel généré en JS - Carrousel d'images entièrement construit à l'exécution par JavaScript, sans aucune balise <img> dans le markup — montre comment l'extracteur récupère les URL d'images depuis un simple littéral de tableau JS dans un bloc <script>.