JQuery đọc tệp html

Question

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

Nội dung chính Show

Cạo từ phía máy khách là gì?
Triển khai cạo phía máy khách bằng jQuery
điều kiện tiên quyết
Tìm nạp trang từ xa bằng cách sử dụng Get
Trích xuất dữ liệu mong muốn bằng phương pháp tìm kiếm của jQuery
Cân nhắc về Bảo mật
Hạn chế
Phần kết luận
Làm cách nào để đọc tệp HTML trong jQuery?
Làm cách nào để tải tệp HTML trong div bằng jQuery?
Làm cách nào để đưa tệp HTML vào HTML bằng jQuery?
Làm cách nào để mở một trang HTML khác bằng jQuery?

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 một 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ẻ

$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert(html);
});

9

<script src="https://code.jquery.com/jquery-3.6.0.min.js">script>

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

<html lang="en"><head>    <meta charset="utf-8">    <title>How to Use Markdown | Draft.devtitle>  <meta content="Draft.dev" property="og:site_name">      <meta content="How to Use Markdown" property="og:title">        <meta content="article" property="og:type">      <meta content="If you don't know what Markdown is, or if you've only heard of it, it may seem confusing how a tool for writing can do these things and be held in such high regard by an entire community. This blog post will dive a bit deeper into why Markdown was developed, what exactly it is, and why you should use it. " property="og:description"> 
--
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js">script>body>html>

0. Phương thức get() tải dữ liệu từ máy chủ bằng cách sử dụng http get request

Yêu cầu

<html lang="en"><head>    <meta charset="utf-8">    <title>How to Use Markdown | Draft.devtitle>  <meta content="Draft.dev" property="og:site_name">      <meta content="How to Use Markdown" property="og:title">        <meta content="article" property="og:type">      <meta content="If you don't know what Markdown is, or if you've only heard of it, it may seem confusing how a tool for writing can do these things and be held in such high regard by an entire community. This blog post will dive a bit deeper into why Markdown was developed, what exactly it is, and why you should use it. " property="og:description"> 
--
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js">script>body>html>

0 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

<html lang="en"><head>    <meta charset="utf-8">    <title>How to Use Markdown | Draft.devtitle>  <meta content="Draft.dev" property="og:site_name">      <meta content="How to Use Markdown" property="og:title">        <meta content="article" property="og:type">      <meta content="If you don't know what Markdown is, or if you've only heard of it, it may seem confusing how a tool for writing can do these things and be held in such high regard by an entire community. This blog post will dive a bit deeper into why Markdown was developed, what exactly it is, and why you should use it. " property="og:description"> 
--
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js">script>body>html>

0 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

<html lang="en"><head>    <meta charset="utf-8">    <title>How to Use Markdown | Draft.devtitle>  <meta content="Draft.dev" property="og:site_name">      <meta content="How to Use Markdown" property="og:title">        <meta content="article" property="og:type">      <meta content="If you don't know what Markdown is, or if you've only heard of it, it may seem confusing how a tool for writing can do these things and be held in such high regard by an entire community. This blog post will dive a bit deeper into why Markdown was developed, what exactly it is, and why you should use it. " property="og:description"> 
--
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js">script>body>html>

0, như được hiển thị bên dưới

$.get('https://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

<html lang="en"><head>    <meta charset="utf-8">    <title>How to Use Markdown | Draft.devtitle>  <meta content="Draft.dev" property="og:site_name">      <meta content="How to Use Markdown" property="og:title">        <meta content="article" property="og:type">      <meta content="If you don't know what Markdown is, or if you've only heard of it, it may seem confusing how a tool for writing can do these things and be held in such high regard by an entire community. This blog post will dive a bit deeper into why Markdown was developed, what exactly it is, and why you should use it. " property="og:description"> 
--
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js">script>body>html>

Đâ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

<html lang="en"><head>    <meta charset="utf-8">    <title>How to Use Markdown | Draft.devtitle>  <meta content="Draft.dev" property="og:site_name">      <meta content="How to Use Markdown" property="og:title">        <meta content="article" property="og:type">      <meta content="If you don't know what Markdown is, or if you've only heard of it, it may seem confusing how a tool for writing can do these things and be held in such high regard by an entire community. This blog post will dive a bit deeper into why Markdown was developed, what exactly it is, and why you should use it. " property="og:description"> 
--
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js">script>body>html>

0

Trí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('https://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 CSS

Nhậ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 thành phần 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('https://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('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert(html);
});

4 và chuyển nó cho phương thức

$.get('https://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('https://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('https://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('https://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('https://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('https://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('https://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('https://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

<html lang="en"><head>    <meta charset="utf-8">    <title>How to Use Markdown | Draft.devtitle>  <meta content="Draft.dev" property="og:site_name">      <meta content="How to Use Markdown" property="og:title">        <meta content="article" property="og:type">      <meta content="If you don't know what Markdown is, or if you've only heard of it, it may seem confusing how a tool for writing can do these things and be held in such high regard by an entire community. This blog post will dive a bit deeper into why Markdown was developed, what exactly it is, and why you should use it. " property="og:description"> 
--
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js">script>body>html>

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

<html lang="en"><head>    <meta charset="utf-8">    <title>How to Use Markdown | Draft.devtitle>  <meta content="Draft.dev" property="og:site_name">      <meta content="How to Use Markdown" property="og:title">        <meta content="article" property="og:type">      <meta content="If you don't know what Markdown is, or if you've only heard of it, it may seem confusing how a tool for writing can do these things and be held in such high regard by an entire community. This blog post will dive a bit deeper into why Markdown was developed, what exactly it is, and why you should use it. " property="og:description"> 
--
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js">script>body>html>

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('https://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ư

<html lang="en"><head>    <meta charset="utf-8">    <title>How to Use Markdown | Draft.devtitle>  <meta content="Draft.dev" property="og:site_name">      <meta content="How to Use Markdown" property="og:title">        <meta content="article" property="og:type">      <meta content="If you don't know what Markdown is, or if you've only heard of it, it may seem confusing how a tool for writing can do these things and be held in such high regard by an entire community. This blog post will dive a bit deeper into why Markdown was developed, what exactly it is, and why you should use it. " property="og:description"> 
--
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js">script>body>html>

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ặc

Hạ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, https://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

Phần 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ụ nhanh và linh hoạt, 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 thu thập dữ liệu 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

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.

Làm cách nào để đọc tệp HTML trong jQuery?

Trình duyệt không có quyền truy cập vào hệ thống tệp của máy chủ; . Mặc dù điều này có nghĩa là một yêu cầu HTTP bổ sung, nhưng việc đọc tệp HTML bằng jQuery thực sự dễ dàng. Chỉ cần sử dụng $. get() , sẽ đọc HTML thông qua AJAX và cho phép bạn lưu trữ nó trong một chuỗi .

Làm cách nào để tải tệp HTML trong div bằng jQuery?

Để tải HTML bên ngoài vào hãy bọc mã của bạn bên trong hàm load() . Để tải một trang trong div trong jQuery, hãy sử dụng phương thức load().

Làm cách nào để đưa tệp HTML vào HTML bằng jQuery?

Bao gồm jQuery bằng CDN . Đầu tiên, chúng ta phải mở tệp Html mà chúng ta muốn thêm jQuery bằng CDN. Step 1: Firstly, we have to open that Html file in which we want to add the jQuery using CDN. Bước 2. Sau đó, chúng ta phải đặt con trỏ giữa thẻ đầu ngay trước thẻ tiêu đề. Và, sau đó chúng ta phải sử dụng thẻ

Làm cách nào để mở một trang HTML khác bằng jQuery?

Làm cách nào để mở một trang HTML mới bằng jQuery? .

$(cái này). tải ("tệp2. html");

$("div1"). tải ("tệp2. html"); //div1 là id cho div bên ngoài của file1

WL. Ứng dụng. openUrl("file2. html");

cửa sổ. openURL("file2. html");

programming html

JQuery đọc tệp html

Cạo từ phía máy khách là gì?

Triển khai cạo phía máy khách bằng jQuery

điều kiện tiên quyết

Tìm nạp trang từ xa bằng cách sử dụng Get

Trích xuất dữ liệu mong muốn bằng phương pháp tìm kiếm của jQuery

Nhận văn bản phần tử bằng ID

Nhận văn bản phần tử bằng tên lớp

Xử lý nhiều phần tử với cùng một lớp

Cân nhắc về Bảo mật

Hạn chế

Phần kết luận

Làm cách nào để đọc tệp HTML trong jQuery?

Làm cách nào để tải tệp HTML trong div bằng jQuery?

Làm cách nào để đưa tệp HTML vào HTML bằng jQuery?

Làm cách nào để mở một trang HTML khác bằng jQuery?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội