Lấy dữ liệu từ trang web JavaScript

Tuy nhiên, hiện nay có các công cụ quét web miễn phí có thể dễ dàng trích xuất dữ liệu từ các trang web javascript sang tệp CSV hoặc JSON

Công cụ quét web miễn phí và mạnh mẽ

Đối với dự án này, chúng tôi sẽ sử dụng ParseHub, một công cụ quét web miễn phí và mạnh mẽ có thể trích xuất dữ liệu từ bất kỳ trang web nào

Ngoài ra, chúng tôi cũng sẽ trích xuất dữ liệu từ Amazon, sử dụng ParseHub để tương tác với thanh tìm kiếm, thực hiện tìm kiếm và loại bỏ nội dung được tải động trong trang kết quả tìm kiếm

Đảm bảo tải xuống và cài đặt ParseHub miễn phí trước khi bắt đầu

Duyệt và cạo nội dung Javascript

Bây giờ, hãy bắt đầu với dự án của chúng tôi

1. Cài đặt và mở ParseHub. Nhấp vào “Dự án mới” và nhập URL mà bạn sẽ lấy dữ liệu từ đó. Trong trường hợp này, chúng tôi sẽ lấy dữ liệu từ Amazon. com. Sau đó, trang sẽ hiển thị bên trong trang

1. Một lệnh Select sẽ được tạo theo mặc định. Hãy sử dụng nó để chọn và tương tác với một phần tử Javascript trên trang, thanh tìm kiếm. Bắt đầu bằng cách nhấp vào thanh tìm kiếm

1. Bây giờ bạn sẽ có thể tạo đầu vào để nhập vào thanh tìm kiếm. Đối với ví dụ này, chúng tôi sẽ sử dụng thuật ngữ “máy tính xách tay”. Bạn sẽ nhận thấy nó cũng sẽ được lấp đầy bên trong trang và các đề xuất sẽ bật lên, tương tác thành công với một phần tử Javascript

1. Quay lại lựa chọn đầu tiên của bạn và đổi tên thành “search_bar”

1. Bây giờ, hãy thiết lập ParseHub để nhấp vào nút tìm kiếm và tải trang kết quả tìm kiếm
2. Nhấp vào dấu PLUS[+] bên cạnh lựa chọn “trang” của bạn và chọn lệnh “Chọn”

1. Với lệnh select, click vào nút Search để chọn. Nó sẽ được đánh dấu màu xanh lá cây để cho biết đã được chọn. Đổi tên lựa chọn của bạn thành “nút”

1. Bây giờ hãy nhấp vào dấu PLUS[+] bên cạnh lựa chọn “nút” và chọn lệnh nhấp

1. Một cửa sổ bật lên sẽ xuất hiện hỏi bạn xem đây có phải là nút “trang tiếp theo” không. Nhấp vào “Không”, đổi tên mẫu của bạn thành “results_template” và nhấp vào nút “Tạo mẫu mới”. Trang kết quả tìm kiếm sẽ tải bên trong ứng dụng

Bạn muốn thiết lập ParseHub để tìm kiếm thông qua danh sách từ khóa?

Trích xuất dữ liệu từ trang kết quả tìm kiếm

Bây giờ hãy thiết lập ParseHub để trích xuất thêm dữ liệu từ trang kết quả tìm kiếm của Amazon

1. Với lệnh chọn được tạo theo mặc định, hãy nhấp vào tên của sản phẩm không được tài trợ đầu tiên trên trang. Nó sẽ được đánh dấu màu xanh lá cây để cho biết đã được chọn

1. Bây giờ hãy nhấp vào tên sản phẩm thứ hai trên trang để chọn tất cả. Bây giờ tất cả chúng sẽ được đánh dấu bằng màu xanh lá cây. Đổi tên lựa chọn của bạn thành “sản phẩm”

1. ParseHub hiện đang lấy tên và URL cho từng danh sách trên trang

Bạn muốn tìm hiểu cách lấy thêm dữ liệu từ Amazon, chẳng hạn như giá cả và chi tiết sản phẩm?

Bớt tư tưởng

Để trích xuất dữ liệu bạn đã chọn, nhấp vào nút Lấy dữ liệu màu xanh lá cây ở thanh bên trái

Tại đây bạn sẽ có thể kiểm tra, lên lịch hoặc chạy công việc cạo của mình

Trong trường hợp này, chúng tôi sẽ chạy nó ngay lập tức. Khi bản ghi của bạn hoàn tất, bạn sẽ có thể tải xuống dưới dạng tệp CSV hoặc JSON

Mục tiêu của ngày hôm nay sẽ là loại bỏ một số dữ liệu ra khỏi trang HTML và cấu trúc dữ liệu đầu ra một cách thông minh để chúng ta có thể lưu ngay vào cơ sở dữ liệu giả định

Trang danh sách công ty

Chúng tôi có danh sách 2 công ty cần trích xuất

Mã có thể trông hơi lộn xộn và điều đó được thực hiện có mục đích.
Gần hơn với thực tế.

Dữ liệu chúng tôi muốn

Sau đó, chúng ta cần tổ chức dữ liệu của mình. Như bạn có thể thấy bên dưới, chúng tôi muốn bắt đầu trực tiếp để sắp xếp dữ liệu theo cách hợp lý chứ không phải như html hiển thị

bộ chọn duy nhất

Bây giờ chúng tôi muốn xác định quy tắc css nào sẽ cho phép chúng tôi xác định từng thành phần trong cấu trúc của chúng tôi. Một số công cụ tồn tại để trợ giúp. Giống như SelectorGadget tuyệt vời dành cho Chrome

Ở đây, chúng ta có một cấu trúc khá đơn giản. Chúng ta có thể làm một cái gì đó như sau

Như bạn có thể thấy, ví dụ: employee không có bộ chọn. Đó là bởi vì chúng tôi tập trung vào việc hiểu ý nghĩa của dữ liệu và nhân viên không được thể hiện trong HTML

Lấy dữ liệu

Chúng tôi có thể làm điều đó thông qua vanilla javascript hoặc chúng tôi có thể tận dụng một trình bao bọc tuyệt vời. cổ vũ. js [thêm]. Nó dựa trên cú pháp jQuery và vì vậy bạn sẽ thấy nó thực sự thân thiện khi sử dụng

Bây giờ, nếu bạn chỉ muốn làm điều đó với cổ vũ, bạn sẽ nhận được kết quả như thế này

Như bạn có thể thấy, chúng tôi có 2 công ty trong một mảng. Dữ liệu khá bẩn mặc dù. Vẫn còn nhiều khoảng trống. Email chứa “Email. ”. Điện thoại chứa “Điện thoại. ” cũng vậy và chúng không được hiển thị thực sự đẹp mắt

Sau đó, bạn có thể xóa những dữ liệu này hoặc thêm một số mã khác vào mã ở trên để thực hiện trực tiếp. Nhưng đừng bận tâm, tôi sẽ cho bạn thấy điều kỳ diệu ngay bây giờ

plugin jsonframe

jsonframe là một plugin mở rộng các chức năng của cổ vũ. Nó thực sự chỉ thêm một chức năng. . cạo [khung]. Vui lòng kiểm tra repo github hoặc gói npm để xem các ví dụ và tùy chọn

jsonframe cho phép bạn nhập tệp json, cạo dữ liệu có cấu trúc được liệt kê trong json và xuất tệp/đối tượng json đã có cấu trúc tốt. Sẵn sàng để lưu vào cơ sở dữ liệu của bạn

Chúng tôi bắt đầu bằng cách đặt JSON với cấu trúc dữ liệu mà chúng tôi đang tìm kiếm và các tham số bổ sung để xác định chính xác những gì chúng tôi muốn và cách thức

Như bạn có thể thấy, chúng tôi nhận được dữ liệu siêu sạch ở đầu ra. Giờ đây, chúng tôi có thể lặp qua mảng công ty và lưu trực tiếp dữ liệu vào cơ sở dữ liệu của mình

Hãy nhớ rằng trang html ở đây khá đơn giản. Khi nói đến các tập dữ liệu khổng lồ, việc giữ chế độ xem dạng cây với đối tượng json sẽ giúp. Tất nhiên, nếu nó trở nên lớn với nhiều cấp độ phụ, bạn có thể viết một số đối tượng json mà bạn sẽ thêm vào đối tượng cuối cùng để có trải nghiệm gõ thân thiện hơn

Để tìm hiểu thêm về plugin jsonframe, vui lòng xem tài liệu

[Hướng dẫn này đã di chuột qua phần trích xuất thực tế của dữ liệu. Nếu bạn muốn đi xa hơn, vui lòng cho tôi biết và tôi có thể thực hiện một số hướng dẫn nâng cao hơn bằng cách sử dụng nó với axios hoặc thậm chí là các trình duyệt không đầu như với cơn ác mộng. js. ]

Cảm ơn vì đã đọc

Tôi đã tạo plugin này vì tôi cần nó cho công việc của mình để trích xuất các cấu trúc dữ liệu phức tạp. Có thể dễ dàng bị lạc trong mã với nhiều nút phụ. Tôi thấy khung json dễ dàng, nhanh chóng và không gặp sự cố

Tôi thu thập thông tin trên web để thu thập dữ liệu cho các công ty mới thành lập và các công ty lớn trên thế giới. Từ việc quét các trang web được bảo mật cao đến lượng dữ liệu khổng lồ [hàng triệu], tôi sẽ có thể giúp bạn một tay — gabin@datascraper. chuyên nghiệp

Tôi cũng đang đồng tài trợ cho một nền tảng để trao quyền một cách thông minh cho các công ty khởi nghiệp ở Pháp bằng cách tăng trưởng đột phá. Si vous êtes intéressez pour vendre vos connaissances de “hackeur tăng trưởng”, n’hésitez pas à me contacter

Làm cách nào để lấy dữ liệu từ HTML bằng JavaScript?

Bạn có thể sử dụng JavaScript để quét web không?

Làm cách nào để xóa bảng từ trang web bằng JavaScript?

Làm cách nào để nhận dữ liệu phản hồi trong JavaScript?