de Codemzy

Răzuirea web a clientului cu JavaScript folosind jQuery și Regex

Razuirea web a clientului cu JavaScript folosind jQuery si

Când construiam primul meu proiect open-source, CodeBadges, m-am gândit că ar fi ușor să obțin date de profil de utilizator de pe toate site-urile principale de învățare a codului.

Eram familiarizat cu apelurile API și primeam solicitări. Am crezut că pot folosi jQuery doar pentru a prelua datele de la diferitele API-uri și a le folosi.

var name="codemzy";                $.get('https://api.github.com/users/' + name, function(response) {                      var followers = response.followers;});

Ei bine, a fost ușor. Dar se dovedește că nu fiecare site web are un API public de pe care puteți pur și simplu să preluați datele de la care doriți.

1611974825 916 Razuirea web a clientului cu JavaScript folosind jQuery si
404: API nu a fost găsit

Dar doar pentru că nu există API public nu înseamnă că trebuie să renunți! Puteți utiliza răzuirea web pentru a obține datele, doar cu un pic de muncă în plus.

Să vedem cum putem folosi web scraping din partea clientului cu JavaScript.

Pentru un exemplu, voi prelua informațiile despre utilizator din profilul meu public Routech. Dar puteți utiliza acești pași pe orice pagină HTML publică.

Primul pas în răzuirea datelor este să obțineți pagina HTML completă utilizând un jQuery .get cerere.

var name = "codemzy";$.get('https://www.freecodecamp.com/' + name, function(response) {  console.log(response);});

Minunat, întregul cod sursă al paginii tocmai s-a conectat la consolă.

Notă: Dacă apare o eroare în acest stadiu de-a lungul liniei No ‘Access-Control-Allow-Origin’ header is present on the requested resource nu te supăra. Derulați în jos până la Nu lăsa CORS să te oprească secțiunea acestui post.

A fost ușor. Folosind JavaScript și jQuery, codul de mai sus solicită o pagină de la www.freecodecamp.org, așa cum ar face un browser. Și Routech răspunde cu pagina. În loc de un browser care rulează codul pentru a afișa pagina, primim codul HTML.

Și asta este ceea ce este web scraping, extragând date de pe site-uri web.

Bine, răspunsul nu este tocmai la fel de îngrijit ca datele pe care le primim din API.

Razuirea web a clientului cu JavaScript folosind jQuery si

Dar … avem datele, acolo undeva.

Odată ce avem codul sursă, informațiile de care avem nevoie sunt acolo, trebuie doar să preluăm datele de care avem nevoie!

Putem căuta prin răspuns pentru a găsi elementele de care avem nevoie.

Să presupunem că vrem să știm câte provocări a îndeplinit utilizatorul, din răspunsul la profilul de utilizator pe care l-am primit înapoi.

La momentul scrierii, provocările finalizate ale unui camper sunt organizate în tabele de pe profilul utilizatorului. Deci, pentru a obține numărul total de provocări finalizate, putem număra numărul de rânduri.

O modalitate este de a înfășura întregul răspuns într-un obiect jQuery, astfel încât să putem folosi metode jQuery precum .find() pentru a obține datele.

// number of challenges completedvar challenges = $(response).find('tbody tr').length;

Acest lucru funcționează bine – obținem rezultatul corect. Dar este nu o cale bună pentru a obține rezultatul pe care îl urmărim. Transformarea răspunsului într-un obiect jQuery încarcă întreaga pagină, inclusiv toate scripturile, fonturile și foile de stil externe din acea pagină … Uh oh!

Avem nevoie de câțiva biți de date. Chiar nu avem nevoie de încărcarea paginii și, cu siguranță, nu de toate resursele externe care vin cu ea.

Am putea elimina etichetele scriptului și apoi vom rula restul răspunsului prin jQuery. Pentru a face acest lucru, am putea folosi Regex pentru a căuta modele de script în text și a le elimina.

Sau mai bine, de ce să nu folosim Regex pentru a găsi ceea ce căutăm în primul rând?

// number of challenges completedvar challenges = response.replace(/<thead>[s|S]*?</thead>/g).match(/<tr>/g).length;

Și funcționează! Folosind codul Regex de mai sus, eliminăm rândurile de cap de tabel (care nu conțineau nici o provocare), și apoi potrivim toate rândurile de tabel pentru a număra numărul de provocări finalizate.

Este și mai ușor dacă datele pe care le doriți sunt doar acolo în răspunsul în text simplu. La momentul scrierii, punctele utilizatorului erau în html ca. <h1 class=”flat-top text-primary”>[ 1498 ]

abia așteaptă să fie răzuit.

var points = response.match(/<h1 class="flat-top text-primary">[ ([d]*?) ]</h1>/)[1];

În modelul Regex de mai sus, potrivim elementul h1 pe care îl căutăm, inclusiv [ ] care înconjoară punctele și grupați orice număr din interior cu ([d]*?). Primim o matrice înapoi, prima [0] elementul este întregul meci și al doilea [1] este meciul nostru de grup (punctele noastre).

Regex este util pentru potrivirea tuturor tipurilor de șabloane în șiruri și este minunat pentru a căuta prin răspunsul nostru pentru a obține datele de care avem nevoie.

Puteți utiliza același proces în 3 pași pentru a răzuie datele profilului dintr-o varietate de site-uri web:

  1. Folosiți JavaScript partea clientului
  2. Utilizați jQuery pentru a răzuie datele
  3. Utilizați Regex pentru a filtra datele pentru informațiile relevante

Până când am lovit o problemă, CORS.

1611974826 447 Razuirea web a clientului cu JavaScript folosind jQuery si
CORS: Acces refuzat

Nu lăsa CORS să te oprească!

CORS sau partajarea resurselor încrucișate poate fi o problemă reală cu răzuirea web a clientului.

Din motive de securitate, browserele restricționează cererile HTTP încrucișate inițiate din scripturi. Și pentru că folosim Javascript partea clientului pe front-end pentru răzuirea web, pot apărea erori CORS.

Iată un exemplu care încearcă să răzuiască datele profilului din CodeWars …

var name = "codemzy";$.get('https://www.codewars.com/users/' + name, function(response) {  console.log(response);});

La momentul scrierii, executarea codului de mai sus vă oferă o eroare legată de CORS.

Dacă nu existăAccess-Control-Allow-Origin antetul din locul în care scrapați, puteți întâmpina probleme.

Vestea proastă este că trebuie să rulați acest tip de solicitări de partea serverului pentru a rezolva această problemă.

Whaaaaaaaat, se presupune că este vorba de o răzuire web a clientului ?!

Vestea bună este că, datorită multor alți dezvoltatori minunați care au întâmpinat aceleași probleme, nu trebuie să atingeți singur back-end-ul.

Rămânând ferm în scriptul nostru de front-end, putem folosi instrumente pe mai multe domenii, cum ar fi Orice origine, Oricare ar fi Originea, Toate originile, crossorigin și probabil mult mai mult. Am constatat că de multe ori trebuie să testați câteva dintre acestea pentru a-l găsi pe cel care va funcționa pe site-ul pe care încercați să-l răzuiești.

Înapoi la exemplul nostru CodeWars, putem trimite solicitarea noastră printr-un instrument pe mai multe domenii pentru a ocoli problema CORS.

var name = "codemzy";var url = "http://anyorigin.com/go?url=" + encodeURIComponent("https://www.codewars.com/users/") + name + "&callback=?";$.get(url, function(response) {  console.log(response);});

Și, la fel ca magia, avem răspunsul nostru.

1611974826 703 Razuirea web a clientului cu JavaScript folosind jQuery si