Hướng dẫn scrape table from website javascript - bảng cạo từ trang web javascript
|
Các bảng HTML là nguồn dữ liệu tốt nhất trên web. Chúng rất dễ hiểu và có thể chứa một lượng dữ liệu to lớn ở định dạng đơn giản để đọc và hiểu. Có thể cạo các bảng HTML là một kỹ năng quan trọng để phát triển cho bất kỳ nhà phát triển nào quan tâm đến khoa học dữ liệu hoặc phân tích dữ liệu nói chung. Show
Trong hướng dẫn này, chúng tôi sẽ đi sâu hơn vào các bảng HTML và xây dựng một tập lệnh đơn giản nhưng mạnh mẽ để trích xuất dữ liệu bảng và xuất nó sang tệp CSV. Bảng web HTML là gì?Bảng HTML là một tập hợp các hàng và cột được sử dụng để hiển thị thông tin ở định dạng lưới trực tiếp trên trang web. Chúng thường được sử dụng để hiển thị dữ liệu bảng, chẳng hạn như bảng tính hoặc cơ sở dữ liệu và là một nguồn dữ liệu tuyệt vời cho các dự án của chúng tôi. Từ dữ liệu thể thao và dữ liệu thời tiết đến sách và tác giả dữ liệu, hầu hết các bộ dữ liệu lớn trên web đều có thể truy cập thông qua các bảng HTML vì chúng tuyệt vời như thế nào khi hiển thị thông tin ở định dạng có cấu trúc và dễ điều hướng.  Tin tuyệt vời cho chúng tôi là, không giống như nội dung được tạo động, dữ liệu của bảng HTML sống trực tiếp bên trong phần tử bảng trong tệp HTML, có nghĩa là chúng tôi có thể xóa tất cả thông tin chúng tôi cần chính xác như các yếu tố khác của Web - Miễn là chúng ta hiểu cấu trúc của chúng. Hiểu cấu trúc bảng HTMLMặc dù bạn chỉ có thể nhìn thấy các cột và hàng ở mặt trước, các bảng này thực sự được tạo bằng một vài thẻ HTML khác nhau:
Nội dung đi vào bên trong thẻ const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");
0 và const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");
2 được sử dụng để tạo một hàng. Nói cách khác: Bảng> Hàng> ô || Bảng> TR> Phân cấp TD được theo sau để tạo bảng HTML.Một ô đặc biệt có thể được tạo bằng thẻ const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");
3 có nghĩa là tiêu đề bảng. Về cơ bản, các ô đầu tiên của hàng đầu tiên có thể được tạo bằng thẻ const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");
3 để chỉ ra hàng là tiêu đề của bảng.Dưới đây là một ví dụ để tạo ra một bảng HTML hai hàng đơn giản và hai cột đơn giản:
const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");
5.Thay vì nhắm mục tiêu chọn bộ chọn CSS cho từng điểm dữ liệu, chúng tôi muốn cạo, chúng tôi sẽ cần tạo một danh sách với tất cả các hàng của bảng và lặp qua chúng để lấy dữ liệu từ các ô của chúng. Nếu chúng ta hiểu logic này, việc tạo kịch bản của chúng ta thực sự khá đơn giản. Cạo các bảng HTML đến CSV với Node.jsNếu đây là lần đầu tiên bạn sử dụng Node.js để quét web, có thể rất hữu ích khi trải qua một số hướng dẫn trước đây của chúng tôi:
Tuy nhiên, chúng tôi sẽ giữ hướng dẫn này là thân thiện với người mới bắt đầu nhất có thể để bạn có thể sử dụng nó ngay cả như một điểm khởi đầu. Lưu ý: Đối với hướng dẫn cài đặt Node.js, vui lòng tham khảo bài viết đầu tiên trong danh sách. For Node.JS installation instructions, please refer to the first article on the list. Đối với dự án ngày hôm nay, chúng tôi sẽ xây dựng một máy cạo Web bằng Axios và Cheerio để loại bỏ dữ liệu nhân viên được hiển thị trên https://datatables.net/examples/styling/display.html. Chúng tôi sẽ trích xuất tên, vị trí, văn phòng, tuổi, ngày bắt đầu và tiền lương cho mỗi nhân viên, sau đó gửi dữ liệu đến CSV bằng gói ObjectStocSV. 1. Chuẩn bị sẵn sàng tệp của chúng tôiĐể khởi động dự án của chúng tôi, hãy để tạo ra một thư mục mới có tên là HTML Table-Scraper, mở thư mục mới trên VSCODE (hoặc Trình chỉnh sửa ưu tiên mã của bạn) và mở một thiết bị đầu cuối mới. Trong thiết bị đầu cuối, chúng tôi sẽ chạy const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");
6 để bắt đầu một dự án Node.js mới. Bây giờ bạn có một tệp JSON mới trong thư mục của mình.Tiếp theo, chúng tôi sẽ cài đặt các phụ thuộc của chúng tôi bằng cách sử dụng các lệnh sau:
Cài đặt lệnh một của chúng tôi: (async function html_scraper() {
const response = await axios('https://datatables.net/examples/styling/display.html');
console.log(response.status)
})();
0.Bây giờ chúng tôi có thể tạo một tệp mới có tên TablesCraper.js và nhập các phụ thuộc của chúng tôi ở trên cùng. const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");
2. Kiểm tra trang web đích bằng cách sử dụng devtoolsTrước khi viết mã, chúng ta cần hiểu trang web được cấu trúc như thế nào. Có, tất cả các bảng sử dụng cấu trúc cơ bản, nhưng điều đó không có nghĩa là tất cả đều được tạo như nhau. Điều đầu tiên chúng ta cần xác định là trên thực tế, đây là một bảng HTML. Nó rất phổ biến cho các trang web sử dụng JavaScript để đưa dữ liệu vào bảng của họ, đặc biệt nếu có bất kỳ dữ liệu thời gian thực nào liên quan. Đối với những trường hợp đó, chúng tôi sẽ phải sử dụng một cách tiếp cận hoàn toàn khác như sử dụng trình duyệt không đầu. Để kiểm tra xem dữ liệu có nằm trong tệp HTML hay không, tất cả những gì chúng ta cần làm là sao chép một số điểm dữ liệu - hãy để nói tên - và tìm nó trong mã nguồn của trang. Chúng tôi đã làm tương tự cho các tên và điểm dữ liệu khác chỉ để đảm bảo, và vâng, tất cả các dữ liệu đều ở đó theo ý của chúng tôi. Một bất ngờ thú vị khác là tất cả các hàng của bàn đều nằm trong HTML thô, mặc dù dường như có một loại phân trang ở mặt trước. Thêm vào đó, bây giờ chúng ta cũng biết rằng có tổng cộng 57 hàng để cạo. Điều này rất quan trọng bởi vì chúng tôi có thể biết liệu chúng tôi có thực sự lấy tất cả các dữ liệu có sẵn hay không. Điều thứ hai chúng tôi muốn kiểm tra trực tiếp trên trình duyệt là bộ chọn của chúng tôi. Thay vì gửi một loạt các yêu cầu không cần thiết, chúng tôi có thể sử dụng bảng điều khiển trình duyệt để lấy các phần tử bằng cách sử dụng (async function html_scraper() {
const response = await axios('https://datatables.net/examples/styling/display.html');
console.log(response.status)
})();
1(async function html_scraper() {
const response = await axios('https://datatables.net/examples/styling/display.html');
console.log(response.status)
})();
2.Nếu chúng ta đi đến bảng điều khiển và nhập (async function html_scraper() {
const response = await axios('https://datatables.net/examples/styling/display.html');
console.log(response.status)
})();
3, nó sẽ trả về bốn bảng khác nhau.Quay trên các bảng, chúng tôi nhanh chóng nhận ra rằng bảng đầu tiên (số 0) là đúng. Vì vậy, hãy để Lừa làm lại nhưng chỉ định lớp - mà trong danh sách được thể hiện bằng các dấu chấm (.). Tuyệt vời, chúng tôi có một bước gần hơn với dữ liệu của chúng tôi! Bằng cách xem xét kỹ hơn, dữ liệu của bảng được quấn quanh thẻ (async function html_scraper() {
const response = await axios('https://datatables.net/examples/styling/display.html');
console.log(response.status)
})();
4, vì vậy, hãy để thêm nó vào bộ chọn của chúng tôi để đảm bảo rằng chúng tôi chỉ lấy các hàng chứa dữ liệu chúng tôi muốn.Cuối cùng, chúng tôi sẽ muốn lấy tất cả các hàng và xác minh rằng bộ chọn của chúng tôi đang lấy toàn bộ 57 hàng. Lưu ý: Vì chúng tôi sử dụng bảng điều khiển để chọn các phần tử trên HTML được hiển thị, chúng tôi cần đặt tổng số lượng mục được hiển thị thành 100. Nếu không, bộ chọn của chúng tôi trên bảng điều khiển sẽ chỉ hiển thị 10 mục nút. Because we’re using the console to select elements on the rendered HTML, we needed to set the total amount of displayed items to 100. Otherwise, our selector on the console will only show10 node items. Với tất cả thông tin này, bây giờ chúng tôi có thể bắt đầu viết mã của chúng tôi! 3. Gửi yêu cầu HTTP của chúng tôi và phân tích HTML RAWAxios giúp việc gửi các yêu cầu HTTP bên trong (async function html_scraper() {
const response = await axios('https://datatables.net/examples/styling/display.html');
console.log(response.status)
})();
5 rất dễ dàng. Tất cả những gì chúng ta cần làm là tạo hàm Async và chuyển URL sang Axios trong một hằng số có tên (async function html_scraper() {
const response = await axios('https://datatables.net/examples/styling/display.html');
console.log(response.status)
})();
6. Chúng tôi cũng sẽ ghi lại mã trạng thái của phản hồi (sẽ là 200 cho một yêu cầu thành công).(async function html_scraper() {
const response = await axios('https://datatables.net/examples/styling/display.html');
console.log(response.status)
})();
Lưu ý: Bạn có thể đặt tên cho các biến này như bạn thích, nhưng giữ chúng càng mô tả càng tốt. You can name these variables as you’d like, but keep them as descriptive as possible. Tiếp theo, chúng tôi sẽ lưu trữ dữ liệu từ phản hồi (HTML thô) vào một hằng số mới có tên HTML, vì vậy chúng tôi có thể chuyển nó cho Cheerio để phân tích cú pháp bằng cách sử dụng (async function html_scraper() {
const response = await axios('https://datatables.net/examples/styling/display.html');
console.log(response.status)
})();
7.const html = await response.data; const $ = cheerio.load(html); 4. Lặp lại qua các hàng bảng HTMLSử dụng bộ chọn mà chúng tôi đã thử nghiệm trước đó, hãy để chọn tất cả các hàng bên trong bảng HTML. const allRows = $('table.display > tbody > tr');
console.log(allRows.length)
57 chính xác là những gì chúng tôi đang hướng tới! Tất nhiên, để đi qua danh sách các hàng, chúng tôi sẽ sử dụng phương pháp (async function html_scraper() {
const response = await axios('https://datatables.net/examples/styling/display.html');
console.log(response.status)
})();
8, nhưng có một điều nữa chúng tôi cần tìm ra: thứ tự của các ô.Không giống như các phần tử HTML thông thường, các tế bào don don có một lớp duy nhất được gán cho chúng. Vì vậy, cố gắng xóa từng điểm dữ liệu với một lớp CSS có thể là một mớ hỗn độn. Thay vào đó, chúng tôi sẽ nhắm mục tiêu vào vị trí const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");
0s trong hàng của nó.Nói cách khác, chúng tôi sẽ nói với tập lệnh của chúng tôi đi đến từng hàng, chọn tất cả các ô bên trong hàng và sau đó lưu trữ từng điểm dữ liệu trong một biến dựa trên vị trí của nó trong hàng. Lưu ý: Trong Node.js, tất cả các danh sách bắt đầu ở 0. Vì vậy, vị trí đầu tiên sẽ là [0] và ô thứ hai sẽ là [1]. In Node.JS, all lists start at 0. So the first position would be [0], and the second cell would be [1]. Nhưng làm thế nào để chúng ta biết vị trí nào là nào? Chúng tôi quay lại bảng điều khiển trình duyệt của chúng tôi và kiểm tra nó: Bây giờ chúng ta đã biết nơi mỗi yếu tố liên quan đến phần còn lại, ở đây, trình phân tích cú pháp đã hoàn thành: allRows.each((index, element) => {
const tds = $(element).find('td');
const name = $(tds[0]).text();
const position = $(tds[1]).text();
const office = $(tds[2]).text();
const age = $(tds[3]).text();
const startDate = $(tds[4]).text();
const salary = $(tds[5]).text();
5. Đẩy dữ liệu được cạo vào một mảng trốngNếu chúng tôi const html = await response.data; const $ = cheerio.load(html);0 dữ liệu bị xóa, chúng tôi sẽ thấy rằng chúng tôi sẽ loại bỏ văn bản ra khỏi mỗi ô, nhưng với kết quả rất vô tổ chức - điều này khiến cho việc tạo tệp CSV của chúng tôi khó khăn hơn. Vì vậy, trước khi chúng tôi xuất dữ liệu của mình, hãy để cho nó đặt hàng một số đơn hàng bằng cách đẩy dữ liệu vào một mảng trống để tạo một danh sách nút đơn giản. Đầu tiên, tạo một mảng trống bên ngoài hàm chính - nếu bạn tạo mảng trống bên trong hàm, nó sẽ được ghi đè lên mọi lần lặp, đó không phải là thứ chúng tôi muốn.
employeeData.push({
'Name': name,
'Position': position,
'Office': office,
'Age': age,
'Start Date': startDate,
'Salary': salary,
})
const html = await response.data; const $ = cheerio.load(html);0 chiều dài của người sử dụng lao động để đảm bảo rằng chúng ta hiện có 57 mục trong đó. Đối với bối cảnh trực quan, chúng ta cũng có thể đăng nhập mảng để xem những gì được lưu trữ bên trong. Như chúng ta có thể thấy, tất cả các dữ liệu hiện được lưu trữ bên trong các mục nút chứa mọi phần dữ liệu ở định dạng có cấu trúc. 6. Gửi dữ liệu được quét đến tệp CSVVới dữ liệu của chúng tôi được tổ chức, chúng tôi có thể chuyển danh sách của mình đến const html = await response.data; const $ = cheerio.load(html);2 và nó sẽ tạo tệp cho chúng tôi mà không có công việc gì: const csv = new ObjectsToCsv(employeeData);
await csv.toDisk('./employeeData.csv')
const html = await response.data; const $ = cheerio.load(html);2, và sau đó bảo nó lưu nó trong máy của chúng tôi cung cấp đường dẫn. 7. Máy cạo bảng HTML [Mã đầy đủ]Xin chúc mừng, bạn đã chính thức tạo ra cái cạp HTML đầu tiên của bạn! So sánh mã của bạn với cơ sở mã đã hoàn thành của hướng dẫn này để đảm bảo bạn đã bỏ lỡ bất cứ điều gì: const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");
employeeData = [];
(async function html_scraper() {
const response = await axios('https://datatables.net/examples/styling/display.html')
const html = await response.data;
const $ = cheerio.load(html);
//Selecting all rows inside our target table
const allRows = $('table.display > tbody > tr');
console.log('Going through rows')
//Looping through the rows
allRows.each((index, element) => {
//Selecting all cells within the row
const tds = $(element).find('td');
//Extracting the text out of each cell
const name = $(tds[0]).text();
const position = $(tds[1]).text();
const office = $(tds[2]).text();
const age = $(tds[3]).text();
const startDate = $(tds[4]).text();
const salary = $(tds[5]).text();
//Pushing scraped data to our empty array
employeeData.push({
'Name': name,
'Position': position,
'Office': office,
'Age': age,
'Start Date': startDate,
'Salary': salary,
})
})
//Exporting scraped data to a CSV file
console.log('Saving data to CSV');
const csv = new ObjectsToCsv(employeeData);
await csv.toDisk('./employeeData.csv')
console.log('Saved to CSV')
})();
Bây giờ, bạn có thể sử dụng dữ liệu này để chạy phân tích sâu hơn như so sánh lương dựa trên tiêu đề công việc hoặc ngày bắt đầu hoặc tìm kiếm xu hướng trong các bộ dữ liệu công việc lớn hơn. Tất nhiên, tập lệnh này có thể được điều chỉnh để xử lý hầu hết mọi bảng HTML mà bạn sẽ tìm thấy, vì vậy hãy giữ cho tâm trí của bạn mở ra các khả năng mới và Tránh bị chặn: Tích hợp Scraperapi trong một dòng mãTrước khi bạn đi xa, có một điều nữa chúng ta cần làm để làm cho cào của chúng ta kiên cường hơn và điều đó xử lý các kỹ thuật và hệ thống chống xẹp. Rất nhiều trang web don lồng thích bị loại bỏ bởi vì, thật đáng buồn, rất nhiều máy quét được tối ưu hóa xấu và có xu hướng làm tổn thương trang web của họ. Vì lý do đó, bạn cần tuân theo một số thực tiễn tốt nhất trên web để đảm bảo rằng bạn đang xử lý các dự án của mình một cách chính xác, mà không gây áp lực quá nhiều lên trang web mục tiêu của bạn, cũng như không đặt tập lệnh và IP của bạn có nguy cơ bị cấm hoặc đưa vào danh sách đen - biến nó thành Không thể truy cập dữ liệu cần thiết từ máy của bạn một lần nữa. Để xử lý xoay IP, kết xuất JavaScript, tìm và triển khai các tiêu đề HTTP, CAPTCHA và nhiều hơn nữa, tất cả những gì chúng ta cần làm là gửi yêu cầu ban đầu của chúng tôi qua máy chủ Scraperapi. API này sẽ sử dụng nhiều năm phân tích thống kê và học máy để xác định đó là sự kết hợp tốt nhất giữa các tiêu đề và proxy, xử lý mọi yêu cầu không thành công và thời gian yêu cầu của chúng tôi để nó không quá tải máy chủ đích của chúng tôi. Thêm nó vào tập lệnh của chúng tôi cũng đơn giản như việc thêm chuỗi này vào URL được truyền vào Axios: const response = await axios('http://api.scraperapi.com?api_key={Your_API_Key}&url=https://datatables.net/examples/styling/display.html')
const html = await response.data; const $ = cheerio.load(html);4 bằng khóa API của riêng bạn - mà bạn có thể tạo bằng cách tạo tài khoản Scraperapi miễn phí. Yêu cầu ban đầu của bạn sẽ mất nhiều thời gian hơn một chút trong khi Scraperapi xử lý mọi phức tạp cho bạn và sẽ chỉ tiêu thụ các khoản tín dụng API cho các yêu cầu thành công. Bây giờ đến lượt của bạn. Quét web là tất cả về thực hành. Mỗi trang web là một câu đố khác nhau, vì vậy, không có cách nào để làm mọi việc. Thay vào đó, tập trung vào việc sử dụng các nền tảng để đảm nhận những thách thức phức tạp hơn. Nếu bạn muốn tiếp tục thực hành, một vài trang web chúng tôi đề xuất là:
Cho đến lần sau, hạnh phúc cào! |
