Interaktive Mathe- und Wissenschafts-Lektionen

HTML-Asset-, Bild- & Markdown-Extraktor

Analysiert rohes HTML nach Skripten, Stylesheets, Bildern und Links. Erfasst auch Inline-Hintergrundbild-URLs aus style-Attributen und <style>-Tags — und extrahiert den sichtbaren Seitentext als sauberes Markdown, praktisch zum Lesen von Artikeln hinter einfachen clientseitigen Paywalls.

Interaktive Simulation wird geladen...

Ein regulärer Ausdruck ist nur für die URLs nötig, die in gar keinem Element stecken 🖖

Die alte Erklärung schrieb es der falschen Maschinerie zu. Dieses Werkzeug übergibt dein Markup dem HTML-Parser des Browsers selbst — DOMParser — und stellt ihm dann einfach Fragen: jedes script[src], jedes Stylesheet-link, jedes Bildelement. Deshalb bringt fehlerhafte Verschachtelung es nicht aus der Bahn. Der reguläre Ausdruck kommt für die eine Aufgabe ins Spiel, die der Parser nicht erledigen kann: URLs zu finden, die Attribut von nichts sind, sondern im Text eines Inline-Skripts oder in einem CSS-url(...) stecken. Zwei verschiedene Probleme, zwei verschiedene Werkzeuge — und zu wissen, was was ist, unterscheidet einen Extraktor, der funktioniert, von einem, der fast funktioniert.

Bilder verstecken sich nicht nur in img-Tags 🖖

Viele denken, ein Webbild stecke immer in einem `<img>`-Tag, doch Browser malen Bilder auch aus CSS-Regeln mit `background-image`, aus responsiven `srcset`-Listen, aus `<meta>`-Vorschautags und sogar aus Arrays in JavaScript. Dieses Werkzeug durchsucht all diese Stellen auf einmal. Praktische Erkenntnis: Ein Foto, das du klar auf dem Bildschirm siehst, hat vielleicht gar kein `<img>`-Tag — es wird von einer Stylesheet-Regel gezeichnet, weshalb 'Rechtsklick, Bild speichern' manchmal scheitert.

Eine weiche Bezahlschranke verbirgt bereits gesendeten Text 🖖

Viele 'Zum Weiterlesen abonnieren'-Schranken sind reines Theater. Der vollständige Artikel steckt meist schon im HTML der Seite und wird nur von einem Overlay oder einer Unschärfe überdeckt — die Worte überquerten das Netz, bevor du zur Kasse gebeten wurdest. Da dieser Extraktor den sichtbaren Text direkt aus dem geparsten Markup als Markdown liest, taucht dieser Inhalt unversehrt wieder auf. Etwas mit CSS zu verbergen ist eben nicht dasselbe, wie es zurückzuhalten.

Quellen (2)

· Aktualisiert

Anhand veröffentlichter Quellen geprüft. Korrekturen willkommen. Redaktionsrichtlinie · Korrekturen

Alle Lektionen: Informatik →

Beispielaufgaben

  • Responsive Galerie - Landingpage mit einem schema.org-ImageObject-JSON-LD-Block und einem responsiven <img srcset> — zeigt die Extraktion strukturierter Bilddaten sowie die Deduplizierung von Auflösungsvarianten desselben Bildes.
  • CSS-Hintergründe - Seite, deren einzige Bilder in CSS-background-image-Deklarationen stecken — eines in einem <style>-Block, eines in einem Inline-style-Attribut — genau die Art Asset, die ein einfacher <img>-Scan übersehen würde.
  • JS-Slider - Bilder-Slider, der komplett zur Laufzeit von JavaScript erzeugt wird, ohne <img>-Tags im Markup — zeigt, wie der Extraktor Bild-URLs aus einem einfachen JS-Array-Literal in einem <script>-Block gewinnt.