7 lépés a webhelyek feltérképezéséhez és kaparásához JavaScriptben

A webkaparás az adatok szelektív kinyerése egy webhelyről vagy bármely online forrásból. Szorosan kapcsolódik a webes feltérképezéshez, amelynek célja a weboldalak követése hiperhivatkozásokon keresztül, és az információk indexelésre való felhasználása.

Egy felmérésben A fejlesztők 65%-a nyilatkozott úgy, hogy JavaScriptet használ. Vitathatatlanul ez a leggyakrabban használt programozási nyelv világszerte, mivel a webhelyek JavaScript-re támaszkodnak funkcióik ellátásához.

Ebből a cikkből megtudhatja, hogyan térképezhet fel és másolhat le webhelyeket JavaScriptben a Node.js használatával. Olvasson tovább, ha többet szeretne megtudni.

🔑 Kulcs elvitelek

• Az NNode.js lehetővé teszi a JavaScript futtatását a Chrome böngészőkonzolon kívül, amely korábban az egyetlen platformja volt.
• A kérés URL-címe https://techjury.net/, amelyet egy eredeti böngészőkérést utánzó HTTP-fejléc kísér.
• Futtassa a kódot a VS Code termináljában a „node webscraper.js” beírásával. Használja a kiválasztott JavaScript fájlnevet.
• Ne feledje, a webhelyek fejlődnek, és a módszerek idővel elveszíthetik hatékonyságukat.

Hogyan lehet feltérképezni és lekaparni webhelyeket JavaScriptben?

Ezzel a kezdőbarát útmutatóval egyszerűvé válik a webkaparás és a feltérképezés. A kaparás megkezdése előtt azonban meg kell felelnie néhány követelménynek.

✅ Profi tipp A webes adatmentés lekéri az adatokat, és biztosítja a vezérlést, de nagy léptékben trükkös lehet. Lépjen be a Bright Data Scraping Browserébe – egy fejlett eszköz, amely automatizált böngészőt használ a hagyományos korlátok túllépéséhez.

Ezek a követelmények a következők:

1. Node.js – Ez lehetővé teszi JavaScript hogy a Chrome böngészőkonzolon kívül futhasson, mivel a JavaScript korábban csak a Chrome-on futott. Felkeresheti a webhelyüket, és letöltheti a legújabb verziót.

2. Kódszerkesztő vagy IDE – Ide írhatja a JavaScript-kódokat. Használata javasolt VS kód az egyszerűség kedvéért. Használhat azonban bármilyen ismert kódszerkesztőt.

Először feltétlenül tesztelje le, hogy a kettő megfelelően van-e telepítve. Ezt megteheti a Parancssorban Windows rendszeren vagy a Terminálban Mac rendszeren.

Csak írja be a parancsot csomópont -vés ezt az eredményt kell kapnia:

Most már létrehozhatja saját JavaScript-lehúzóját az alábbi lépések végrehajtásával:

🗒️ Jegyzet A teljes folyamat bemutatása érdekében ez az útmutató összefoglalja webhelyünket

1. Hozzon létre egy mappát a projekthez

💡 Tudtad? A JavaScript erős, 89,77%-os piaci részesedéssel rendelkezik, így a dokumentumszabványok éllovasa, különösen az Egyesült Államokban.

Létre kell hoznia egy mappát a JavaScript-fájlok kaparás céljából történő mentéséhez. Ehhez kövesse az alábbi lépéseket:

1. Hozzon létre egy mappát bárhol. Ez a lépés lesz a munkaterülete a webkaparó projekthez. Nevezheted Webkaparó-projekt.

2. Indítsa el a VS kódot.

3. Kattintson a gombra Mappa megnyitása, majd válassza ki a létrehozott mappát

4. Az első JavaScript-fájl létrehozásához kattintson a szimbólumra Új fájl. Nevezheted, aminek akarod.

Ügyeljen arra, hogy hozzáadja a .js kiterjesztés (példa: webscraper.js). Ennek a fájlnak automatikusan meg kell nyílnia.

5. A könnyebbé tétel érdekében használja a beépített Terminál VS Code. Kattintson rá Terminál a felső lehetőségek között, majd kattintson a gombra Új terminál.

A munkaterületnek így kell kinéznie:

2. Telepítse a Libraries For Scraping alkalmazást

A könyvtár előre megírt kódok gyűjteményét tartalmazza, hogy gyorsabbá és hatékonyabbá tegye a programozást. A Node.js-ben számos könyvtár található a lekaparáshoz.

🎉 Érdekes tény A Node.js a CORS Anywhere nevű népszerű nyílt forráskódú modult tartalmazza. Átirányítja a kéréseket egy helyi proxyhoz, amely lekéri az adatokat a célforrástól, és a megfelelő fejlécekkel továbbítja a böngészőnek. Ez az ingyenes eszköz népszerű a fejlesztők és a webhelytulajdonosok körében, de folyamatos Node.js működést igényel.

Íme néhány a legnépszerűbbek közül:

• Viszlátot mond – adatok kinyerésére szolgál egy HTML kód elemeibe történő elemzésével.
• Axios – HTTP kérések lebonyolítására szolgál, ami alkalmassá teszi a feltérképezésre.
• Bábjátékos – valódi Chrome-ot szimulál, de fej nélküli böngészőként, vagyis nincs felület. A Puppeteer segítségével automatizálhatja a webes feltérképezési tevékenységeket, például a valódi Google Chrome-ban való böngészést.

A következő lépés a Cheerio-t és az Axiost fogja használni. Telepítésükhöz írja be ezt a parancsot a VS Code terminálon:

npm install cheerio axios

Ezt követően továbbléphet a tényleges kódra.

3. HTTP-kérés küldése

Az első dolog, amit a kaparókódnak meg kell tennie, a Cheerio és az Axios importálása a funkcióik eléréséhez. Ez lesz a kód eleje:

const axios = request(‘axios’); const cheerio = request(‘cheerio’);

Tegyük fel, hogy azt tervezzük, hogy információkat kapunk a nevek és leírások a eOldal.hu szerzői közül.

Ehhez a programnak HTTP kérést kell küldenie a célwebhelynek, az alábbiak szerint:

async function scrapeData() { próbáld meg { const url = ‘https://techjury.net/‘; // Cserélje ki a lemásolni kívánt webhely URL-jére const fejlécek = { „User-Agent”: „Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, mint a Gecko) Chrome/96.0.4664.93 Safari/537.36” }; const válasz = várakozás axios.get(url, { fejlécek }); const $ = cheerio.load(response.data); const szerzői = ();

A kérés elküldésének URL-címe be van állítva https://techjury.net/. Egy HTTP-fejléc a user-agent is hozzáadásra kerül, hogy valódi böngészőből származó érvényes kérésnek tűnjön.

A „const szerzők” mentse el a kapott eredmények tömbjeit. A következő teendő az, hogy pontosan meghatározza a releváns adatokat a HTML-tartalomból.

4. Válassza az Elemek HTML-ben lehetőséget

Ugrás a eOldal.hu kezdőlapjára. Fogadja el, hogyan néz ki. Azt a részt kell kikaparnia, ahol a szerzők listája és leírása látható.

Az oldal szerkezetének teljes elemzéséhez meg kell nyitnia a böngésző DevTools alkalmazását.

Kattintson jobb gombbal egy üres helyre, és válassza ki a Vizsgálja meg opció. Meg kell nyitnia a DevTool-t a alatt Elemek szakasz. Látni fogja a webhely HTML-struktúráját a böngésző által megjelenített formában.

Így néz ki az írás idején:

Ne feledje, hogy a szerzők nevét és leírását próbálja megszerezni. Meg kell találnod a CSS-választók tartalmazza az ehhez szükséges információkat.

A CSS-szelektorok olyan azonosítók, ahol a CSS-stílus-szkripteket alkalmazni kell (például egy adott betűtípus egy adott szakaszhoz). Ez lehetővé teszi a Cheerio számára, hogy kiválassza ezeket az elemeket, és kinyerje adataikat.

Ezen a képernyőképen a szerző neve a ” osztályt kapjafelhasználónév,” és a szerző leírása a ” osztályban találhatóleírás.” Mindketten a „kártya__szerző” konténer.

5. Kaparja ki a releváns adatokat

Most, hogy azonosította a szükséges szelektorokat, ideje beírni a kódot az adatok kinyeréséhez.

Itt van egy minta kód:

// Használja a Cheerio-választókat a szerzői információkat tartalmazó elemek megcélzásához $(‘.kártya__szerző‘).each((index, elem) => { const szerzőNév = $(elem).find(‘.felhasználónév‘).szöveg(); const authorDescription = $(elem).find(‘.leírás‘).szöveg(); authors.push({ név: szerzőNév, leírás: authorDescription }); });

Tól card_authorválassza ki a választót felhasználónév és leírás hogy ennek megfelelően kinyerje a vonatkozó adatokat.

szerzők.push segít betölteni az összegyűjtött információkat a szerzői sor. Most már csak rendszereznie kell az összegyűjtött adatokat.

6. Alakítsa át az eredményeket JSON-ba

A webkaparó program következő kódrészlete a kinyert adatokat JSON formátumba konvertálja. Ez hasznos lesz az API-kon történő adatátvitelhez.

💡 Tudtad? A JSON egy könnyű, emberi és géppel olvasható formátum, amely zökkenőmentesen illeszkedik a különféle programozási nyelvekhez, beleértve a Pythont is.

// Konvertálja a kimásolt adatokat JSON-ba const jsonData = JSON.stringify(szerzők, null, 2); console.log(‘Kimásolt adatok (JSON):\n’, jsonData);

Íme egy másik rész a hibák elkapására:

fogás (hiba) { console.error(‘Hiba:’, hiba); }

A végső kódnak segítenie kell az esetleges hibák megjelenítésében. Hibákat találhat azokon a webhelyeken, amelyek lekopás elleni intézkedéseket alkalmaznak, például egyoldalas alkalmazású (SPA) weboldalakon, mint például a Facebook vagy a Google.

7. Futtassa a kódot

Itt az ideje a kód futtatásának. Mielőtt azonban futtatná, feltétlenül tekintse át a teljes kódot.

Íme, hogyan kell kinéznie:

const axios = request(‘axios’); const cheerio = request(‘cheerio’); async function scrapeData() { próbáld meg { const url = ‘https://techjury.net/’; // Cserélje ki a lemásolni kívánt webhely URL-címével const fejlécek = { „User-Agent”: „Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, mint a Gecko) Chrome/96.0.4664.93 Safari/537.36” }; const válasz = várakozás axios.get(url, { fejlécek }); const $ = cheerio.load(response.data); const szerzők = (); // Használja a Cheerio-választókat a szerzői információkat tartalmazó elemek célzásához $(‘.card__author’).each((index, elem) => { const szerzőNév = $(elem).find(‘.felhasználónév’).text(); const authorDescription = $(elem).find(‘.leírás’).text(); authors.push({ név: szerzőNév, leírás: authorDescription }); }); // Konvertálja a kimásolt adatokat JSON-ba const jsonData = JSON.stringify(szerzők, null, 2); console.log(‘Kimásolt adatok (JSON):\n’, jsonData); } fogás (hiba) { console.error(‘Hiba:’, hiba); } } scrapeData();

A kódot a VS Code beépített termináljában futtathatja. Csak írja be csomópont webscraper.js. Használhatja a JavaScript-fájl nevét, ha másikat választ.

Az eredménynek így kell kinéznie:

Ha elkészült, megállapíthatja, hogy az első webes lekaparási projektje JavaScriptben befejeződött.

Következtetés

Az oldalak folyamatosan változnak. Ne feledje, hogy ugyanez a módszer a jövőben nem biztos, hogy működik.

A fenti lépések képet adnak arról, hogyan működik a webkaparás és a feltérképezés JavaScriptben.

🗒️ Kapcsolódó cikkek Tekintse meg ezeket a cikkeket, hogy megtudja, hogyan gyűjthet hasznos webhelyadatokat kutatáshoz, elemzéshez vagy automatizáláshoz. Lefedik a webkaparási technikákat, eszközöket és etikai szempontokat.

GYIK