Cái gì được sử dụng để phân tích cú pháp và chạy JavaScript trong nodejs

Theo truyền thống, nút. js không cho phép bạn phân tích cú pháp và thao tác đánh dấu vì nó thực thi mã bên ngoài trình duyệt. Trong bài viết này, chúng ta sẽ khám phá Cheerio, một thư viện JavaScript mã nguồn mở được thiết kế dành riêng cho mục đích này

Cheerio cung cấp triển khai jQuery linh hoạt và gọn nhẹ, nhưng nó được thiết kế cho máy chủ. Thao tác và hiển thị đánh dấu với Cheerio cực kỳ nhanh vì nó hoạt động với một đánh dấu ngắn gọn và đơn giản (tương tự như jQuery). Và ngoài việc phân tích cú pháp HTML, Cheerio cũng hoạt động rất tốt với các tài liệu XML

Bàn thắng

Hướng dẫn này giả định không có kiến ​​thức trước về Cheerio và sẽ bao gồm các lĩnh vực sau

• Cài đặt Cheerio trong một nút. dự án js
• Hiểu về Cheerio (tải, bộ chọn, thao tác DOM và hiển thị)
• Xây dựng một ứng dụng mẫu (FeatRocket) để loại bỏ các bài viết nổi bật của LogRocket và ghi chúng vào bảng điều khiển

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

Để hoàn thành hướng dẫn này, bạn sẽ cần

• Làm quen cơ bản với HTML, CSS và DOM
• Quen thuộc với npm và Node. js
• Làm quen với dòng lệnh và trình soạn thảo văn bản

Thiết lập Cheerio

Cheerio có thể được sử dụng trên mọi ES6+, TypeScript và Node. js, nhưng trong bài viết này, chúng tôi sẽ tập trung vào Node. js

Để bắt đầu, chúng ta cần chạy lệnh

npm install cheerio

3, lệnh này sẽ tạo một tệp

npm install cheerio

4 mới với nội dung như bên dưới

{
  "name": "cheerio-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Khi đã xong, chúng ta hãy tiến hành cài đặt Cheerio

npm install cheerio

Một cách để xác minh rằng quá trình cài đặt thành công là kiểm tra tệp

npm install cheerio

4. Bạn sẽ thấy một mục mới có tên là

npm install cheerio

6 được thêm vào như bên dưới

...
"dependencies": {
    "cheerio": "^1.0.0-rc.10"
  }

Hiểu Cheerio

Đang tải

Bước đầu tiên khi làm việc với Cheerio là tải tệp HTML/XML mà chúng tôi muốn phân tích cú pháp hoặc thao tác. Chúng tôi phải làm điều này bởi vì chúng tôi đang làm việc với Node. js, không có quyền truy cập trực tiếp vào đánh dấu ứng dụng của chúng tôi trừ khi nó được tải xuống theo một cách nào đó

Việc tải có thể đạt được bằng phương pháp

npm install cheerio

7 và điều này yêu cầu một đối số quan trọng — tài liệu HTML/XML bạn muốn tải

Dưới đây là một ví dụ

________số 8

Tương tự như trình duyệt web, sử dụng phương pháp

npm install cheerio

7 sẽ tự động bao gồm các thẻ

npm install cheerio

9,

...
"dependencies": {
    "cheerio": "^1.0.0-rc.10"
  }

0 và

...
"dependencies": {
    "cheerio": "^1.0.0-rc.10"
  }

1 tương ứng nếu chúng chưa có trong đánh dấu của chúng tôi

Bạn có thể tắt tính năng này bằng cách đặt đối số thứ ba của phương thức

...
"dependencies": {
    "cheerio": "^1.0.0-rc.10"
  }

2 thành

...
"dependencies": {
    "cheerio": "^1.0.0-rc.10"
  }

3

npm install cheerio

5

Điều này có thể hữu ích trong trường hợp bạn đang làm việc với các tài liệu XML thay vì HTML

Bộ chọn

Chúng tôi sử dụng các bộ chọn để cho Cheerio biết chúng tôi muốn làm việc trên yếu tố nào. Như đã đề cập trước đó, việc triển khai bộ chọn trong Cheerio tương tự như jQuery, cũng tuân theo kiểu CSS, nhưng có một vài bổ sung

Một số bộ chọn được sử dụng phổ biến nhất trong Cheerio bao gồm

• ...
  "dependencies": {
      "cheerio": "^1.0.0-rc.10"
    }
  

  4 — Dấu hoa thị

  ...
  "dependencies": {
      "cheerio": "^1.0.0-rc.10"
    }
  

  5 được sử dụng làm bộ chọn ký tự đại diện, sẽ chọn mọi phần tử trên đánh dấu được cung cấp

• ...
  "dependencies": {
      "cheerio": "^1.0.0-rc.10"
    }
  

  6 — Bộ chọn thẻ. chọn mọi phiên bản của thẻ được cung cấp. Trong trường hợp này, nó sẽ chọn mọi phiên bản của thẻ

  ...
  "dependencies": {
      "cheerio": "^1.0.0-rc.10"
    }
  

  7

• ...
  "dependencies": {
      "cheerio": "^1.0.0-rc.10"
    }
  

  8 — Lớp học. chọn mọi phần tử có lớp

  ...
  "dependencies": {
      "cheerio": "^1.0.0-rc.10"
    }
  

  9 được áp dụng cho nó

• const cheerio = require("cheerio");
  const markup = `
  
                      
  Vue.js ⚡
                      
  React
                      
  Svelte
                      
  Angular
                  
  `;
  /* Note - variable name is declared as '$' to bring the familiarity of JQuery to cheerio */
  const $ = cheerio.load(markup);
  

  0 — ID. chọn mọi phần tử có

  const cheerio = require("cheerio");
  const markup = `
  
                      
  Vue.js ⚡
                      
  React
                      
  Svelte
                      
  Angular
                  
  `;
  /* Note - variable name is declared as '$' to bring the familiarity of JQuery to cheerio */
  const $ = cheerio.load(markup);
  

  1id duy nhất

• const cheerio = require("cheerio");
  const markup = `
  
                      
  Vue.js ⚡
                      
  React
                      
  Svelte
                      
  Angular
                  
  `;
  /* Note - variable name is declared as '$' to bring the familiarity of JQuery to cheerio */
  const $ = cheerio.load(markup);
  

  2 — chọn phần tử hiện có tiêu điểm

• const cheerio = require("cheerio");
  const markup = `
  
                      
  Vue.js ⚡
                      
  React
                      
  Svelte
                      
  Angular
                  
  `;
  /* Note - variable name is declared as '$' to bring the familiarity of JQuery to cheerio */
  const $ = cheerio.load(markup);
  

  3 — Thuộc tính. chọn bất kỳ phần tử đầu vào nào có loại đầu vào là

  const cheerio = require("cheerio");
  const markup = `
  
                      
  Vue.js ⚡
                      
  React
                      
  Svelte
                      
  Angular
                  
  `;
  /* Note - variable name is declared as '$' to bring the familiarity of JQuery to cheerio */
  const $ = cheerio.load(markup);
  

  4

• const cheerio = require("cheerio");
  const markup = `
  
                      
  Vue.js ⚡
                      
  React
                      
  Svelte
                      
  Angular
                  
  `;
  /* Note - variable name is declared as '$' to bring the familiarity of JQuery to cheerio */
  const $ = cheerio.load(markup);
  

  5 — Chọn tất cả các phần tử con có lớp bar, bên dưới một phần tử có lớp foo

Sự kiện và thao tác DOM

Tương tự như JQuery, Cheerio được cung cấp cùng với một loạt các phương thức liên quan đến DOM để truy cập và thao tác các phần tử HTML và thuộc tính của chúng

Một số phương pháp được sử dụng phổ biến nhất bao gồm

• const cheerio = require("cheerio");
  const markup = `
  
                      
  Vue.js ⚡
                      
  React
                      
  Svelte
                      
  Angular
                  
  `;
  /* Note - variable name is declared as '$' to bring the familiarity of JQuery to cheerio */
  const $ = cheerio.load(markup);
  

  6 — Đặt hoặc trả về nội dung

  const cheerio = require("cheerio");
  const markup = `
  
                      
  Vue.js ⚡
                      
  React
                      
  Svelte
                      
  Angular
                  
  `;
  /* Note - variable name is declared as '$' to bring the familiarity of JQuery to cheerio */
  const $ = cheerio.load(markup);
  

  7 của phần tử được chọn. Sử dụng đánh dấu trước đây của chúng tôi làm ví dụ, chúng tôi có thể lấy nội dung văn bản của một phần tử có lớp

  const cheerio = require("cheerio");
  const markup = `
  
                      
  Vue.js ⚡
                      
  React
                      
  Svelte
                      
  Angular
                  
  `;
  /* Note - variable name is declared as '$' to bring the familiarity of JQuery to cheerio */
  const $ = cheerio.load(markup);
  

  8 bằng mã bên dưới.

  const cheerio = require("cheerio");
  const markup = `
  
                      
  Vue.js ⚡
                      
  React
                      
  Svelte
                      
  Angular
                  
  `;
  /* Note - variable name is declared as '$' to bring the familiarity of JQuery to cheerio */
  const $ = cheerio.load(markup);
  

  9

• npm install cheerio
  

  50 — Đặt hoặc trả về nội dung

  npm install cheerio
  

  51 của phần tử được chọn

• npm install cheerio
  

  52 — Sẽ chèn nội dung được cung cấp làm phần tử con cuối cùng của mỗi phần tử được chọn

• npm install cheerio
  

  53 — Không giống như append, phần này sẽ chèn nội dung được cung cấp dưới dạng phần tử con đầu tiên của mỗi phần tử được chọn

• npm install cheerio
  

  54 và

  npm install cheerio
  

  55 - Sẽ xóa hoặc thêm các lớp được cung cấp cho tất cả các phần tử phù hợp

• npm install cheerio
  

  56 — Trả về giá trị Boolean (true/false) nếu phần tử được chọn có tên lớp được cung cấp

• npm install cheerio
  

  57 - Sẽ kiểm tra xem lớp được cung cấp có trong phần tử được chọn hay không. Nếu có, lớp được cung cấp sẽ bị xóa, nếu không, nó sẽ được thêm vào danh sách lớp thành phần đã chọn

kết xuất

Khi bạn đã hoàn tất việc phân tích cú pháp và thao tác đánh dấu của mình, bạn có thể truy cập nội dung gốc của nó bằng

npm install cheerio

0

Theo mặc định, khi bạn đang phân tích nội dung HTML trong Cheerio, một số thẻ sẽ được mở và trong trường hợp bạn đang làm việc với nội dung XML, tệp XML sẽ không hợp lệ theo cách này

Để kết xuất một tài liệu XML hợp lệ, bạn có thể sử dụng chức năng tiện ích XML của Cheerio

npm install cheerio

1

Kỳ Công Xây DựngTên Lửa

Bây giờ chúng ta đã hiểu cơ bản về cách thức hoạt động của Cheerio, hãy tiếp tục và xây dựng một dự án mẫu

---

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

---

Chúng tôi sẽ xây dựng FeatRocket, một ứng dụng CLI sẽ thu thập tất cả các bài viết nổi bật trên blog LogRocket và ghi chúng vào bảng điều khiển của chúng tôi

Đây là cách chúng ta sẽ đạt được điều này

1. Hiểu cấu trúc blog LogRocket
2. Tải xuống đánh dấu trang web
3. Tải phần đánh dấu đã tải xuống vào phiên bản Cheerio mới
4. Xác định vị trí và lọc ra những nội dung cần thiết
5. Ghi kết quả vào bàn điều khiển

Hiểu cấu trúc trang web

Bước đầu tiên trong việc quét web là hiểu nội dung của trang web được sắp xếp như thế nào, tôi. e. , thuộc tính nào (

npm install cheerio

58,

npm install cheerio

59,

npm install cheerio

00) được gán cho phần tử bạn muốn truy cập, v.v.

Trong trường hợp của chúng tôi, chúng tôi có thể nhận thấy rằng nội dung được nhắm mục tiêu của chúng tôi được sắp xếp như bên dưới

npm install cheerio

5

Trong đó

npm install cheerio

01 với lớp

npm install cheerio

02 là trình bao bọc cho tất cả các bài viết được nhắm mục tiêu của chúng tôi và các

npm install cheerio

01 với lớp

npm install cheerio

04 là thẻ cho từng bài viết nổi bật

Tải xuống đánh dấu trang web

Bây giờ chúng tôi hiểu cấu trúc trang web cùng với nội dung được nhắm mục tiêu của chúng tôi. Tiếp theo tạo một tệp mới

npm install cheerio

05 rồi tiến hành cài đặt Axios — chúng tôi sẽ sử dụng Axios để tải xuống nội dung trang web

npm install cheerio

1

Và chúng ta có thể lấy mã nguồn trang web với

npm install cheerio

2

Dán mã ở trên vào tệp

npm install cheerio

05 mới tạo và chạy mã đó với tệp này

npm install cheerio

0

Bạn sẽ nhận thấy rằng toàn bộ nội dung HTML của trang web được ghi vào bảng điều khiển

Tải đánh dấu vào Cheerio

Bước tiếp theo là tải đánh dấu đã tải xuống vào Cheerio mới

npm install cheerio

1

Lọc kết quả

Tiếp theo, chúng tôi chỉ muốn lọc ra những nội dung cần thiết. Chúng tôi đã biết các thuộc tính cho các

npm install cheerio

01 được nhắm mục tiêu của chúng tôi (.

npm install cheerio

02 và

npm install cheerio

09). Chúng ta sẽ chỉ cần lặp qua từng thứ này và đăng nhập chúng vào bảng điều khiển, để toàn bộ mã của chúng ta sẽ trông như thế này

npm install cheerio

2

Bây giờ, nếu chúng ta chạy

npm install cheerio

10, bạn sẽ thấy kết quả giống như bên dưới trong bảng điều khiển của mình

Phần kết luận

Cheerio là một khung tuyệt vời để thao tác và loại bỏ nội dung đánh dấu ở phía máy chủ, ngoài ra nó còn nhẹ và thực hiện một cú pháp quen thuộc

Hướng dẫn này đã cung cấp một hướng dẫn chuyên sâu về cách bắt đầu sử dụng Cheerio trong một dự án thực tế

Để tham khảo thêm, bạn cũng có thể xem mã nguồn của FeatRocket trên GitHub

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

---

Các bài viết hay khác từ LogRocket

• Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
• Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các sự cố trong ứng dụng của bạn
• Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của Node
• Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
• Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
• So sánh NestJS với. Thể hiện. js

---

Chỉ dành cho 200 Theo dõi các yêu cầu mạng chậm và không thành công trong sản xuất

Triển khai trang web hoặc ứng dụng web dựa trên Node là phần dễ dàng. Đảm bảo phiên bản Node của bạn tiếp tục cung cấp tài nguyên cho ứng dụng của bạn là lúc mọi thứ trở nên khó khăn hơn. Nếu bạn quan tâm đến việc đảm bảo các yêu cầu đối với dịch vụ phụ trợ hoặc bên thứ ba thành công, hãy thử LogRocket. https. // tên lửa. com/đăng ký/

LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ diễn ra trong khi người dùng tương tác với ứng dụng của bạn theo đúng nghĩa đen. Thay vì đoán xem tại sao lại xảy ra sự cố, bạn có thể tổng hợp và báo cáo về các yêu cầu mạng có vấn đề để nhanh chóng hiểu nguyên nhân gốc rễ

Cái gì được sử dụng để phân tích cú pháp JavaScript trong Nodejs?

Cái gì được sử dụng để phân tích cú pháp và thực thi mã JavaScript?

Cái gì được sử dụng để phân tích cú pháp và chạy JavaScript trong nút JS Mcq?

JavaScript chạy trong nút JS như thế nào?