Jquery phân tích cú pháp html thành chuỗi

Question

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

Nội dung chính Show

Định nghĩa và cách sử dụng
Thông số
Giá trị trả về
Hỗ trợ trình duyệt
Thêm ví dụ
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ế
Sự kết luận
Làm cách nào để lấy dữ liệu từ trang HTML bằng jQuery?
parseHTML là gì?
jQuery HTML là gì?
Làm cách nào để tạo phần tử DOM trong jQuery?

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);

Tự mình thử »

Định nghĩa và cách sử dụng

Phương thức

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

9 chuyển đổi một giá trị thành một chuỗi

Ghi 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ỗi

Hỗ trợ trình duyệt

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

Tự mình thử »

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ẻ

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

1

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

2. 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>

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

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

2, 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>

2

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 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('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

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

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 để lấy dữ liệu từ trang HTML bằng jQuery?

Để lấy nội dung HTML của một phần tử bằng jQuery, hãy sử dụng phương thức html() . Phương thức html() lấy nội dung html của phần tử được so khớp đầu tiên.

parseHTML là gì?

Phân tích cú pháp HTML liên quan đến mã hóa và xây dựng cây . Mã thông báo HTML bao gồm thẻ bắt đầu và thẻ kết thúc, cũng như tên và giá trị thuộc tính. Nếu tài liệu được định dạng tốt, việc phân tích cú pháp sẽ đơn giản và nhanh hơn. Trình phân tích cú pháp phân tích đầu vào được mã hóa vào tài liệu, xây dựng cây tài liệu.

jQuery HTML là gì?

jQuery là thư viện JavaScript nhẹ, "viết ít hơn, làm nhiều hơn" . Mục đích của jQuery là làm cho việc sử dụng JavaScript trên trang web của bạn trở nên dễ dàng hơn nhiều. jQuery đảm nhận nhiều tác vụ thông thường yêu cầu nhiều dòng mã JavaScript để thực hiện và gói gọn chúng thành các phương thức mà bạn có thể gọi bằng một dòng mã.

Làm cách nào để tạo phần tử DOM trong jQuery?

Trả lời. Sử dụng phương thức append() hoặc prepend() của jQuery . Phương thức append() của jQuery chèn nội dung vào cuối phần tử đã khớp, trong khi phương thức prepend() chèn nội dung vào đầu phần tử đã khớp.

programming html

Jquery phân tích cú pháp html thành chuỗi

ví dụ

Định nghĩa và cách sử dụng

Ghi chú

cú pháp

Thông số

Giá trị trả về

Hỗ trợ trình duyệt

Thêm ví dụ

ví dụ

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ế

Sự kết luận

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

parseHTML là gì?

jQuery HTML là gì?

Làm cách nào để tạo phần tử DOM trong 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