Cheerio 教程 · ZetCode 中文系列教程

# Cheerio 教程 > 原文： [http://zetcode.com/javascript/cheerio/](http://zetcode.com/javascript/cheerio/) Cheerio 教程展示了如何使用 Cheerio 模塊在 JavaScript 中進行網頁抓取。 Cheerio 實現了為服務器設計的 jQuery 的核心。 ## Cheerio Cheerio 是專門為服務器設計的核心 jQuery 的快速，靈活和精益實現。在本教程中，我們從本地 Web 服務器上抓取 HTML。對于本地 Web 服務器，我們使用`local-web-server`。 `index.html` ```js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Home page</title> <style> .fpar { font-family: Georgia; } </style> </head> <body> <main> <h1>My website</h1> <p class="fpar"> I am a JavaScript programmer. </p> <p> My hobbies are: </p> <ul> <li>Swimming</li> <li>Tai Chi</li> <li>Running</li> <li>Web development</li> <li>Reading</li> <li>Music</li> </ul> </main> </body> </html> ``` 我們將使用此 HTML 文件。 ## Cheerio 選擇器在 Cherrion 中，我們使用選擇器來選擇 HTML 文檔的標簽。選擇器語法是從 jQuery 借用的。以下是可用選擇器的部分列表： * `$("*")` - 選擇所有元素 * `$("#first")` — 用`id="first`選擇元素 * `$(".intro")` — 選擇帶有`class="intro"`的所有元素 * `$("div")` - 選擇所有`<div>`元素 * `$("h2, div, p")` - 選擇所有`<h2>, <div>, <p>`元素 * `$("li:first")` — 選擇第一個`<li>`元素 * `$("li:last")` — 選擇最后一個`<li>`元素 * `$("li:even")` — 選擇所有偶數`<li>`元素 * `$("li:odd")` - 選擇所有奇數`<li>`元素 * `$(":empty")` - 選擇所有為空的元素 * `$(":focus")` - 選擇當前具有焦點的元素 ## 安裝 Cheerio 和其他模塊我們安裝了`cheerio`模塊和兩個附加模塊。 ```js $ nodejs -v v9.11.2 ``` 我們使用 Node 版本 9.11.2。 ```js $ sudo npm i cheerio $ sudo npm i request $ sudo npm i -g local-web-server ``` 我們安裝`cheerio`，`request`和`local-web-server`。 ```js $ ws Serving at http://t400:8000, http://127.0.0.1:8000, http://192.168.0.3:8000 ``` 在項目目錄中，我們有`index.html`文件，我們啟動了本地 Web 服務器。它會自動在三個不同的位置提供`index.html`文件。 ## Cheerio 標題在第一個示例中，我們獲得了文檔的標題。 `get_title.js` ```js const cheerio = require('cheerio'); const request = require('request'); request({ method: 'GET', url: 'http://localhost:8000' }, (err, res, body) => { if (err) return console.error(err); let $ = cheerio.load(body); let title = $('title'); console.log(title.text()); }); ``` 該示例打印 HTML 文檔的標題。 ```js const cheerio = require('cheerio'); const request = require('request'); ``` 我們包括`cheerio`和`request`模塊。使用`cheerio`，我們可以進行網頁抓取。使用`request`，我們創建 GET 請求。 ```js request({ method: 'GET', url: 'http://localhost:8000' }, (err, res, body) => { ``` 我們向本地 Web 服務器提供的 localhost 創建 GET 請求。該資源在`body`參數中可用。 ```js let $ = cheerio.load(body); ``` 首先，我們加載 HTML 文檔。為了模仿 jQuery，我們使用`$`變量。 ```js let title = $('title'); ``` 選擇器返回`title`標簽。 ```js console.log(title.text()); ``` 使用`text()`方法，我們獲得`title`標簽的文本。 ```js $ node get_title.js Home page ``` 該示例打印文檔的標題。 ## Cheerio 獲取父元素使用`parent()`檢索父元素。 `get_parent.js` ```js const cheerio = require('cheerio'); const request = require('request'); request({ method: 'GET', url: 'http://localhost:8000' }, (err, res, body) => { if (err) return console.error(err); let $ = cheerio.load(body); let h1El = $('h1'); let parentEl = h1El.parent(); console.log(parentEl.get(0).tagName) }); ``` 我們得到`h1`元素的父元素。 ```js $ node get_parent.js main ``` `h1`的父元素是`main`。 ## Cheerio 第一個&最后一個元素 `cheerio`對象的第一個元素可以使用`first()`找到，最后一個元素可以使用`last()`找到。 `first_last.js` ```js const cheerio = require('cheerio'); const request = require('request'); request({ method: 'GET', url: 'http://localhost:8000' }, (err, res, body) => { if (err) return console.error(err); let $ = cheerio.load(body); let main = $('main'); let fel = main.children().first(); let lel = main.children().last(); console.log(fel.get(0).tagName); console.log(lel.get(0).tagName); }); ``` 該示例打印`main`標簽的第一個和最后一個元素。 ```js let main = $('main'); ``` 我們選擇`main`標簽。 ```js let fel = main.children().first(); let lel = main.children().last(); ``` 我們從`main`子級中獲得第一個和最后一個元素。 ```js console.log(fel.get(0).tagName); console.log(lel.get(0).tagName); ``` 我們找出標簽名稱。 ```js $ node first_last.js h1 ul ``` `main`的第一個標簽是`h1`，最后一個標簽是`ul`。 ## Cheerio 添加元素 `append()`方法在指定標簽的末尾添加一個新元素。 `add_element.js` ```js const cheerio = require('cheerio'); const request = require('request'); request({ method: 'GET', url: 'http://localhost:8000' }, (err, res, body) => { if (err) return console.error(err); let $ = cheerio.load(body); let ulEl = $('ul'); ulEl.append('<li>Travel</li>'); let lis = $('ul').html(); let items = lis.split('\n'); items.forEach((e) => { if (e) { console.log(e.replace(/(\s+)/g, '')); } }); }); ``` 在示例中，我們向`ul`元素添加了一個新列表項，并將其打印到控制臺。 ```js ulEl.append('<li>Travel</li>'); ``` 我們增加了一個新的愛好。 ```js let lis = $('ul').html(); ``` 我們得到`ul`標簽的 HTML。 ```js let items = lis.split('\n'); items.forEach((e) => { if (e) { console.log(e.replace(/(\s+)/g, '')); } }); ``` 我們去除空格。元素的文本數據包含大量空間。 ```js $ node add_element.js <li>Swimming</li> <li>TaiChi</li> <li>Running</li> <li>Webdevelopment</li> <li>Reading</li> <li>Music</li> <li>Travel</li> ``` 在列表的末尾附加了一個新的旅行愛好。 ## Cheerio 元素后插入使用`after()`，我們可以在標簽后插入元素。 `insert_after.js` ```js const cheerio = require('cheerio'); const request = require('request'); request({ method: 'GET', url: 'http://localhost:8000' }, (err, res, body) => { if (err) return console.error(err); let $ = cheerio.load(body); $('main').after('<footer>This is a footer</footer>') console.log($.html()); }); ``` 在示例中，我們在`main`元素之后插入一個`footer`元素。 ## Cheerio 在元素上循環使用`each()`，我們可以循環遍歷元素。 `loop_elements.js` ```js const cheerio = require('cheerio'); const request = require('request'); request({ method: 'GET', url: 'http://localhost:8000' }, (err, res, body) => { if (err) return console.error(err); let $ = cheerio.load(body); let hobbies = []; $('li').each(function (i, e) { hobbies[i] = $(this).text(); }); console.log(hobbies); }); ``` 該示例循環訪問`ul`的`li`標簽，并打印數組中元素的文本。 ```js $ node loop_elements.js [ 'Swimming', 'Tai Chi', 'Running', 'Web development', 'Reading', 'Music' ] ``` 這是輸出。 ## Cheerio 獲取元素屬性可以使用`attr()`函數檢索屬性。 `attributes.js` ```js const cheerio = require('cheerio'); const request = require('request'); request({ method: 'GET', url: 'http://localhost:8000' }, (err, res, body) => { if (err) return console.error(err); let $ = cheerio.load(body); let fpEl = $('h1 + p'); let attrs = fpEl.attr(); console.log(attrs); }); ``` 在示例中，我們獲得了`h1`的直接同級段落的屬性。 ```js $ node attributes.js { class: 'fpar' } ``` 該段包含`fpar`類。 ## Cheerio 過濾器我們可以使用`filter()`在元素上應用過濾器。 `filtering.js` ```js const cheerio = require('cheerio'); const request = require('request'); request({ method: 'GET', url: 'http://localhost:8000' }, (err, res, body) => { if (err) return console.error(err); let $ = cheerio.load(body); let allEls = $('*'); let filteredEls = allEls.filter(function (i, el) { // this === el return $(this).children().length > 3; }); let items = filteredEls.get(); items.forEach(e => { console.log(e.name); }); }); ``` 在示例中，我們找到了包含三個以上子元素的文檔的所有元素。 ```js let allEls = $('*'); ``` `*`選擇器選擇所有元素。 ```js let filteredEls = allEls.filter(function (i, el) { // this === el return $(this).children().length > 3; }); ``` 在檢索到的元素上，我們應用過濾器。僅當元素包含三個以上的子元素時，該元素才包含在過濾列表中。 ```js let items = filteredEls.get(); items.forEach(e => { console.log(e.name); }); ``` 我們遍歷過濾后的列表并打印元素的名稱。 ```js $ node filtering.js head main ul ``` `head`，`main`和`ul`元素包含三個以上的子代。不包含`body`，因為它僅包含一個直屬子代。在本教程中，我們使用 Cheerio 庫在 JavaScript 中完成了 Web 抓取。您可能也對以下相關教程感興趣： [JQuery 教程](/web/jquery/)， [Moment.js 教程](/javascript/momentjs/)，[從 JavaScript 中的 URL 讀取 JSON](/articles/javascriptjsonurl/) ， [JavaScript 貪食蛇教程](/javascript/snake/) ， [Node Sass 教程](/javascript/nodesass/)， [Lodash 教程](/javascript/lodash/)。