Phân tích cú pháp một chuỗi thành một mảng các nút DOM, tùy ý sử dụng ngữ cảnh trong tài liệu trong khi vẫn giữ lại bất kỳ tập lệnh người dùng nào có khi được yêu cầu
Trong ví dụ dưới đây, khi chúng tôi nhấn nút lần đầu tiên, chúng tôi phân tích cú pháp một số HTML được định dạng tốt thành bộ phận có id là 'div19' và sau đó in ra các nút DOM
ví dụ
Chuyển đổi các giá trị khác nhau thành chuỗi
Chuỗi[ngày mới[]];
Chuỗi["12345"];
Chuỗi[12345];
Định nghĩa và cách sử dụng
Phương thức
$.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
9 chuyển đổi một giá trị thành một chuỗiGhi chú
Phương thức String[] trả về giống như phương thức toString[] cho bất kỳ giá trị nào
cú pháp
Thông số
Tham sốMô tảgiá trịBắt buộc.Một giá trị JavaScript.
Giá trị trả về
LoạiMô tảMột chuỗi. Giá trị được chuyển thành chuỗiHỗ trợ trình duyệt
$.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
9 là một tính năng ECMAScript1 [ES1]ES1 [JavaScript 1997] được hỗ trợ đầy đủ trên mọi trình duyệt
ChromeIEEdgeFirefoxSafariOperaCóCóCóCóCóCóThêm ví dụ
ví dụ
Chuyển đổi các giá trị khác nhau thành chuỗi
Chuỗi[Boolean[0]];
Chuỗi[Boolean[1]];
Chuỗi[[1,2,3,4]
Trang web của bạn đôi khi có thể cần sử dụng thông tin từ các trang web khác không cung cấp API. Chẳng hạn, bạn có thể cần lấy thông tin giá cổ phiếu từ một trang web trong thời gian thực và hiển thị nó trong một tiện ích của trang web của bạn. Tuy nhiên, một số trang web tổng hợp giá cổ phiếu không cung cấp API
Trong những trường hợp như vậy, bạn cần truy xuất mã nguồn HTML của trang web và tìm thông tin bạn cần theo cách thủ công. Quá trình truy xuất và phân tích cú pháp HTML theo cách thủ công này để tìm thông tin cụ thể được gọi là quét web
Trong hướng dẫn này, bạn sẽ học cách cạo trang web bằng jQuery, một công cụ nhanh và linh hoạt để phân tích cú pháp và thao tác HTML. Mặc dù jQuery thường được sử dụng để tương tác hiệu quả với HTML và CSS từ JavaScript phía máy khách, nhưng khả năng thao tác và duyệt DOM của nó kết hợp với tính năng AJAX khiến nó trở thành một lựa chọn chắc chắn để quét web
Cạo từ phía máy khách là gì?
Quét phía máy khách liên quan đến việc tìm nạp nguồn của trang web dưới dạng HTML bằng cách sử dụng URL của trang và phân tích cú pháp thông tin để có được thông tin cụ thể
Ví dụ: bạn có thể muốn xây dựng một công cụ tìm kiếm mã. Một trang web như Stack Overflow cung cấp API để truy cập các câu hỏi và câu trả lời của họ theo chương trình. Tuy nhiên, các trang web hướng dẫn khác, chẳng hạn như trang này từ Bản nháp. nhà phát triển, có các khối mã nhưng không cung cấp API để sử dụng thông tin. Để đọc các khối mã của họ, bạn sẽ phải sử dụng tính năng quét phía máy khách, như đã giải thích trong hướng dẫn này
Triển khai cạo phía máy khách bằng jQuery
Hướng dẫn này chỉ cho bạn cách cạo một trang web bằng jQuery. jQuery là một thư viện JavaScript nhanh và mạnh, hỗ trợ duyệt tài liệu HTML và thao tác với các thuộc tính phần tử HTML. Nó cũng có các tính năng có thể xử lý các sự kiện của các phần tử HTML. jQuery sử dụng bộ chọn CSS để chọn đối tượng
điều kiện tiên quyết
Bắt đầu bằng cách thêm một tham chiếu đến thư viện jQuery bằng cách sử dụng thẻ
How to Use Markdown | Draft.dev
--
1
Tìm nạp trang từ xa bằng cách sử dụng Get
Trong phần này, bạn sẽ tìm hiểu cách tìm nạp trang HTML từ xa bằng phương thức jQuery
How to Use Markdown | Draft.dev
--
2. Phương thức get[] tải dữ liệu từ máy chủ bằng cách sử dụng http get requestYêu cầu
How to Use Markdown | Draft.dev
--
2 cho phép bạn xác định chức năng gọi lại có thể được thực thi khi yêu cầu nhận thành công. Hàm gọi lại cũng chấp nhận tham sốHãy xem xét một trang web mẫu từ Bản nháp. blog của nhà phát triển. Trang web này chứa các phần tử HTML có ID và các lớp khác nhau và một số có thuộc tính. Bạn sẽ tìm nạp mã HTML hoàn chỉnh của trang này và cảnh báo nó
Để tìm nạp URL, hãy chuyển nó tới phương thức
How to Use Markdown | Draft.dev
--
2 của jQuery và xác định hàm gọi lại bằng câu lệnh cảnh báo. Bạn có thể chuyển dữ liệu HTML được trả về bởi yêu cầu How to Use Markdown | Draft.dev
--
2, như được hiển thị bên dưới$.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
Bạn sẽ thấy mã HTML hoàn chỉnh của trang web. Đầu ra được cắt bớt để chỉ hiển thị HTML mẫu
How to Use Markdown | Draft.dev
--
Đây là cách bạn có thể lấy nguồn HTML hoàn chỉnh của một trang web bằng phương thức jQuery
How to Use Markdown | Draft.dev
--
2Trích xuất dữ liệu mong muốn bằng phương pháp tìm kiếm của jQuery
Trong phần này, bạn sẽ tìm hiểu cách trích xuất dữ liệu mong muốn từ nguồn HTML [ví dụ: trích xuất văn bản của một phần tử HTML cụ thể hoặc trích xuất văn bản của các phần tử với một lớp cụ thể]. Ngoài ra, bạn sẽ học cách truy cập các phần tử có cùng lớp HTML
Ghi chú. để biết ID hoặc lớp của các thành phần HTML trong trang web, bạn có thể nhấp chuột phải vào trang web và chọn tùy chọn xem nguồn trang
jQuery cung cấp phương thức
$.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
2 để tìm kiếm thông qua các đối tượng con cháu có sẵn trong tập hợp các phần tử DOM. Bạn có thể sử dụng bộ chọn CSS để tìm một phần tử. Bộ chọn CSS xác định các thành phần áp dụng kiểu CSSNhận văn bản phần tử bằng ID
Thuộc tính ID được sử dụng để chỉ định một ID duy nhất cho các phần tử HTML trong trang web của bạn. Bạn không thể xác định cùng một ID cho nhiều thành phần trong cùng một trang HTML. CSS và JavaScript trong trang của bạn sử dụng ID này để truy cập vào các phần tử cụ thể nhằm đặt kiểu hoặc thực hiện bất kỳ thao tác nào khác trên phần tử
Trong quá trình quét dữ liệu, bạn có thể sử dụng ID này để tìm và truy cập phần tử. URL mẫu có một phần tử có ID tại sao sử dụng-đánh dấu. Sử dụng phương pháp
$.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
2, bạn sẽ tìm thấy phần tử có ID này và in thông tin văn bản của nóĐể tìm một phần tử có ID, bạn cần sử dụng bộ chọn ID, đó là #. Ví dụ: để chọn một phần tử có ID tại sao sử dụng-markdown, hãy đặt trước ID của phần tử đó là
$.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
4 và chuyển nó cho phương thức $.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
2, như được hiển thị bên dưới. Sau khi phần tử được chọn, bạn có thể sử dụng phương pháp $.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
6 để truy cập thuộc tính văn bản của phần tử________số 8
Bây giờ bạn đã truy cập phần tử HTML bằng ID của nó
Nhận văn bản phần tử bằng tên lớp
Tiếp theo, bạn sẽ học cách chọn các phần tử bằng cách sử dụng lớp của nó. Thuộc tính class được sử dụng để chỉ định lớp của các phần tử HTML. Không giống như thuộc tính ID, bạn có thể có nhiều phần tử với cùng một lớp trong một trang web
Thuộc tính lớp cho phép bạn xác định một tập hợp các kiểu bằng CSS. Kiểu này sẽ được áp dụng cho tất cả các thành phần được xác định bằng lớp cụ thể đó. Trong quá trình cạo dữ liệu, bạn có thể sử dụng tên lớp này để tìm tất cả các phần tử với một lớp cụ thể và lấy dữ liệu từ các phần tử đó
Trong URL mẫu, có một phần tử có tiêu đề trang lớp
Để tìm một phần tử có lớp, bạn cần sử dụng bộ chọn lớp, đó là
$.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
7. Ví dụ: để chọn một phần tử có tiêu đề trang lớp, thêm tiền tố $.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
7 với lớp của phần tử đó và chuyển nó cho phương thức $.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
2, như minh họa bên dưới. Sau khi phần tử được chọn, bạn có thể sử dụng phương pháp $.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
6 để truy cập thuộc tính văn bản của phần tử$.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
3Đây là cách bạn tìm thấy một phần tử với một lớp
Xử lý nhiều phần tử với cùng một lớp
Như đã thảo luận trước đây, có thể có nhiều phần tử có cùng một lớp trong tài liệu HTML. Do đó, bây giờ bạn sẽ học cách tìm nhiều hơn một phần tử trong cùng một lớp
Bạn có thể sử dụng phương thức
$.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
2 để tìm một phần tử bằng tên lớp của nó. Khi có nhiều phần tử cùng lớp, bạn có thể sử dụng phương thức How to Use Markdown | Draft.dev
--
2 để lặp lại các phần tử. Hàm gọi lại được xác định sẽ được áp dụng cho từng phần tửTrong URL mẫu, có nhiều phần tử được xác định bằng phần tô sáng của lớp. Nó là lớp được sử dụng để biểu thị tất cả các khối mã có hướng dẫn đánh dấu
Khi bạn tìm phần tử bằng cách sử dụng lớp này, bạn sẽ nhận được một danh sách các đối tượng jQuery. Sau đó, bạn có thể sử dụng phương thức
How to Use Markdown | Draft.dev
--
2 để lặp lại các phần tử này và in văn bản của các phần tử để in các khối hướng dẫn, như minh họa bên dưới$.get['//draft.dev/learn/how-to-use-markdown', function[html] {
alert[html];
}];
7Đây là cách bạn có thể tìm thấy một phần tử có tên lớp của nó và lặp lại các phần tử phù hợp
Cân nhắc về Bảo mật
Khi tìm nạp dữ liệu từ một URL, nó có thể chứa các tập lệnh. Theo mặc định, API của jQuery không chạy tập lệnh. Tuy nhiên, mã HTML như
How to Use Markdown | Draft.dev
--
4 sẽ thực thi tập lệnh một cách gián tiếp. Do đó, bạn cần cẩn thận và dọn dẹp hoặc thoát khỏi các tập lệnh khỏi nguồn. Mặt khác, các tập lệnh không xác định có thể gây hại cho chương trình của bạn hoặc bạn có khả năng cung cấp quyền truy cập vào thông tin cá nhân của mình cho tin tặcHạn chế
Có một số hạn chế đối với việc quét web phía máy khách bằng jQuery
- Nguồn của trang web có thể thay đổi theo thời gian. Do đó, bất kỳ thay đổi nào trong tên lớp hoặc ID của trang web đều có thể làm hỏng ứng dụng cạo
- Các trang web động thường xuyên thay đổi rất khó bị loại bỏ khỏi phía máy khách do tính chất thay đổi của cấu trúc phần tử HTML, ID phần tử và các lớp phần tử. Ngoài ra, do các cân nhắc về bảo mật, các tập lệnh không được thực thi trong khi cạo. Vì vậy, các thành phần được tải bởi tập lệnh sẽ không được tải trong trang web động
- It is difficult to scrape pages with pagination where the data is loaded with a script. If pagination is implemented where each page has a separate URL [for example, //example.com?page=] then it’s possible to scrape by simply making separate requests. However, if the pages are loaded via AJAX calls [for example, an infinite scrolling page], then it’s difficult to scrape since scripts cannot be executed by jQuery.
Do đó, phương pháp này phù hợp nhất cho các trang sử dụng kết xuất phía máy chủ, HTML tĩnh đơn giản hoặc HTML một trang
Sự kết luận
Trong bài viết này, bạn đã học cách thực hiện quét web bằng jQuery, cách tìm các phần tử bằng cách sử dụng phần tử ID hoặc HTML của nó và cách xử lý các phần tử HTML có cùng lớp
jQuery là một công cụ linh hoạt và nhanh chóng cung cấp chức năng phân tích cú pháp và thao tác các phần tử HTML DOM, cho phép bạn xây dựng các ứng dụng cạo mạnh mẽ cho các trang web
Tuy nhiên, khi quét các trang web theo cách thủ công bằng các chương trình của riêng bạn, có khả năng IP của bạn có thể bị chặn vì lý do bảo mật hoặc giới hạn truy cập. Trong trường hợp đó, bạn có thể sử dụng API, chẳng hạn như Scraping Bee, xử lý các trình duyệt không đầu và xoay vòng proxy cho bạn
Vikram Aruchamy là kiến trúc sư giải pháp đám mây thích xây dựng mọi thứ trên đám mây và là một nhà văn kỹ thuật thích viết về cách xây dựng mọi thứ trên đám mây.