Bởi Praveen Dubey
Trước đây, tôi phải thu thập dữ liệu một trang web để tìm các liên kết và sử dụng thêm các liên kết trang đó để thu thập dữ liệu bằng cách sử dụng selen hoặc trình điều khiển rối. Việc thiết lập nội dung trên trang web hơi kỳ lạ nên tôi không thể bắt đầu trực tiếp với selen và nút. Ngoài ra, thật không may, dữ liệu trên trang web rất lớn. Tôi phải nhanh chóng nghĩ ra một cách tiếp cận trước tiên là thu thập dữ liệu tất cả các liên kết và chuyển chúng để thu thập thông tin chi tiết của từng trang.
Đó là nơi tôi học được những điều thú vị này với API Console của trình duyệt. Bạn có thể sử dụng tính năng này trên bất kỳ trang web nào mà không cần thiết lập nhiều vì nó chỉ là JavaScript.
Hãy chuyển sang chi tiết kỹ thuật.
Tổng quan cấp cao
Để thu thập thông tin tất cả các liên kết trên một trang, tôi đã viết một đoạn mã JS nhỏ trong bảng điều khiển. JavaScript này thu thập dữ liệu tất cả các liên kết (mất 1–2 giờ, vì nó cũng phân trang) và tạo ra json tập tin với tất cả các dữ liệu được thu thập thông tin. Điều cần lưu ý là bạn cần đảm bảo trang web hoạt động tương tự như một ứng dụng một trang. Nếu không, nó sẽ không tải lại trang nếu bạn muốn thu thập dữ liệu nhiều trang. Nếu không, mã bảng điều khiển của bạn sẽ biến mất.
Phương tiện không làm mới trang trong một số trường hợp. Bây giờ, hãy thu thập thông tin câu chuyện và tự động lưu dữ liệu cóp nhặt vào một tệp từ bảng điều khiển sau khi loại bỏ.
Nhưng trước khi chúng tôi làm điều đó, đây là bản demo nhanh về quá trình thực thi cuối cùng.
Bản demo
1. Lấy phiên bản đối tượng console từ trình duyệt
// Console API to clear console before logging new data
console.API;
if (typeof console._commandLineAPI !== 'undefined') { console.API = console._commandLineAPI; //chrome
} else if (typeof console._inspectorCommandLineAPI !== 'undefined'){ console.API = console._inspectorCommandLineAPI; //Safari
} else if (typeof console.clear !== 'undefined') { console.API = console;
}
Mã chỉ đơn giản là cố gắng lấy phiên bản đối tượng bảng điều khiển dựa trên trình duyệt hiện tại của người dùng. Bạn có thể bỏ qua và gán trực tiếp phiên bản cho trình duyệt của mình.
Ví dụ:nếu bạn sử dụng Chrome , đoạn mã dưới đây là đủ.
if (typeof console._commandLineAPI !== 'undefined') { console.API = console._commandLineAPI; //chrome
}
2. Xác định hàm trợ giúp Junior
Tôi giả định rằng hiện tại bạn đã mở một câu chuyện trên Medium trong trình duyệt của mình. Các dòng từ 6 đến 12 xác định các thuộc tính thành phần DOM có thể được sử dụng để trích xuất tiêu đề câu chuyện, số lần vỗ tay, tên người dùng, URL hình ảnh hồ sơ, mô tả hồ sơ và thời gian đọc câu chuyện, tương ứng.
Đây là những điều cơ bản mà tôi muốn thể hiện trong câu chuyện này. Bạn có thể thêm một số thành phần khác như trích xuất liên kết từ câu chuyện, tất cả hình ảnh hoặc liên kết nhúng.
3. Xác định chức năng Trợ giúp cấp cao — quái thú
Khi chúng tôi thu thập dữ liệu trang để tìm các phần tử khác nhau, chúng tôi sẽ lưu chúng vào một bộ sưu tập. Bộ sưu tập này sẽ được chuyển đến một trong các chức năng chính.
Chúng tôi đã xác định tên hàm, console.save . Nhiệm vụ của hàm này là kết xuất tệp csv/json với dữ liệu được truyền.
Nó tạo ra một Đối tượng Blob với dữ liệu của chúng tôi. Một Blob đối tượng đại diện cho một đối tượng giống như tệp của dữ liệu thô, bất biến. Các đốm màu biểu thị dữ liệu không nhất thiết phải ở định dạng gốc JavaScript.
Tạo blob được gắn vào thẻ liên kết <;a> sự kiện nhấp chuột được kích hoạt.
Đây là bản demo nhanh của console.save với một array nhỏ được truyền dưới dạng dữ liệu.
Tập hợp tất cả các đoạn mã lại với nhau, đây là những gì chúng ta có:
- Phiên bản API bảng điều khiển
- Hàm trợ giúp để trích xuất các phần tử
- Chức năng Console Save để tạo tập tin
Hãy thực thi console.save() trong trình duyệt để lưu dữ liệu vào một tệp. Để làm điều này, bạn có thể truy cập một câu chuyện trên Medium và thực thi mã này trong bảng điều khiển của trình duyệt.
Tôi đã hiển thị bản demo bằng cách trích xuất dữ liệu từ một trang, nhưng mã tương tự có thể được điều chỉnh để thu thập thông tin nhiều câu chuyện từ trang chủ của nhà xuất bản. Lấy ví dụ về freeCodeCamp:bạn có thể điều hướng từ câu chuyện này sang câu chuyện khác và quay lại (sử dụng nút quay lại của trình duyệt) tới trang chủ của nhà xuất bản mà không làm mới trang.
Dưới đây là mã tối thiểu bạn cần để trích xuất nhiều câu chuyện từ trang chủ của nhà xuất bản.
Hãy xem mã hoạt động để lấy mô tả hồ sơ từ nhiều câu chuyện.
Đối với bất kỳ loại ứng dụng nào như vậy, sau khi loại bỏ dữ liệu, bạn có thể chuyển dữ liệu đó tới console.save của chúng tôi hoạt động và lưu trữ nó trong một tập tin.
Chức năng lưu bảng điều khiển có thể nhanh chóng được gắn vào mã bảng điều khiển của bạn và có thể giúp bạn kết xuất dữ liệu vào tệp. Tôi không nói bạn có để sử dụng bảng điều khiển để thu thập dữ liệu, nhưng đôi khi đây sẽ là cách tiếp cận nhanh hơn vì tất cả chúng ta đều quen làm việc với DOM bằng bộ chọn CSS.
Bạn có thể tải mã xuống từ Github
Cảm ơn bạn đã đọc bài viết này! Hy vọng nó mang lại cho bạn ý tưởng hay để ghi lại một số dữ liệu một cách nhanh chóng mà không cần thiết lập nhiều. Nhấn nút vỗ tay nếu nó thích nó! Nếu bạn có bất kỳ câu hỏi nào, hãy gửi email cho tôi (praveend806 [at] gmail [dot] com).
Tài nguyên để tìm hiểu thêm về Bảng điều khiển:
Sử dụng Bảng điều khiển | Công cụ dành cho nhà phát triển web | Nhà phát triển của Google
_Tìm hiểu cách điều hướng Bảng điều khiển JavaScript dành cho nhà phát triển Chrome._developers.google.comBảng điều khiển trình duyệt
_Bảng điều khiển trình duyệt giống như Bảng điều khiển web nhưng được áp dụng cho toàn bộ trình duyệt chứ không phải một tab nội dung duy nhất._developer.mozilla.orgBlob
_Đối tượng Blob đại diện cho một đối tượng giống như tệp chứa dữ liệu thô, bất biến. Các đốm màu đại diện cho dữ liệu không nhất thiết phải có trong…_developer.mozilla.org
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu