HTML elementide, piltide ja Markdowni ekstraktor

Analüüsib toorest HTML-i skriptide, laaditabelite, piltide ja linkide leidmiseks. Hõlmab ka style-atribuutidest ja style-siltidest pärit sisseehitatud taustapildi URL-e — samuti eraldab lehe nähtava teksti puhta Markdownina, mis on kasulik artiklite lugemiseks lihtsate kliendipoolsete tasumüüride taga.

Algväärtused — HTML elementide, piltide ja Markdowni ekstraktor

Sordi pildid	Algne järjestus

Muuda ülal mõnda juhtelementi ja tulemused arvutatakse uuesti.

Interaktiivse simulatsiooni laadimine...

Regulaaravaldist on vaja ainult nende URL-ide jaoks, mis ei asu üheski elemendis 🖖

Vana seletus omistas au valele masinavärgile. See tööriist annab sinu märgistuse brauseri enda HTML-parserile — DOMParser — ja esitab sellele siis lihtsalt küsimusi: iga script[src], iga stiililehe link, iga pildielement. Just seepärast ei aja vigane pesastus seda rööpast välja. Regulaaravaldis tuleb mängu ühe ülesande jaoks, mida parser ei suuda: leida URL-e, mis ei ole millegi atribuut, vaid peidus reasisese skripti tekstis või CSS-i url(...) sees. Kaks eri probleemi, kaks eri tööriista — ja teadmine, kumb on kumb, eristab töötavat ekstraktorit sellest, mis peaaegu töötab.

Pildid ei peitu ainult img-siltides 🖖

Paljud arvavad, et veebipilt asub alati `<img>`-sildis, kuid brauserid joonistavad pilte ka CSS-i `background-image` reeglitest, responsiivsetest `srcset`-loenditest, `<meta>` eelvaatesiltidest ja isegi JavaScripti massiividest. See tööriist läbib kõik need kohad korraga. Praktiline järeldus: foto, mida sa ekraanil selgelt näed, ei pruugi omada ühtegi `<img>`-silti — selle joonistab stiilileht, mistõttu 'parem klõps, salvesta pilt' vahel ei tööta.

Pehme maksemüür peidab juba saadetud teksti 🖖

Paljud 'telli edasilugemiseks' müürid on puhas teater. Terve artikkel on tavaliselt juba lehe HTML-is olemas ja seda vaid katab ülekate või hägustus — sõnad ületasid võrgu enne, kui sinult tasu küsiti. Kuna see ekstraktor loeb nähtava teksti otse parsitud märgistusest Markdownina, ilmub see sisu puutumatuna taas nähtavale. See tuletab meelde, et millegi peitmine CSS-iga ei ole sama mis selle kinnihoidmine.

Allikad (2)

Which attributes carry an image source, and how a browser resolves them: WHATWG, HTML Standard — Images (srcset, sizes, and the picture element).
The Markdown the extractor emits, specified rather than assumed: J. MacFarlane, CommonMark Spec, version 0.31.2, 2024 — §6.4 Images.

42Mathi meeskond · Uuendatud 2026-07-04

Kontrollitud avaldatud allikate põhjal. Parandused on teretulnud. Toimetamispõhimõtted · Parandused

Kõik Arvutustehnika õppetunnid →

Näiteülesanded

reageeriv galerii - Sihtleht schema.org ImageObject JSON-LD plokiga ja reageeriva <img srcset>-iga — näitab struktureeritud andmetega piltide eraldamist ning sama pildi eri eraldusvõimega variantide dubleerimise vältimist.
CSS-taustad - Leht, mille ainsad pildid asuvad CSS background-image määrangutes — üks <style> plokis, teine sisese style atribuudi sees — selline ressurss jääks lihtsal <img>-skannimisel märkamata.
JS-renderdatud slaider - Pildikarusell, mille JavaScript ehitab täielikult käivitusajal, ilma ühegi <img> märgendita HTML-is — näitab, kuidas eraldaja leiab pildi URL-id lihtsast JS-massiivi literaalist <script> plokis.