How to select element by text content in Cheerio?

When using Cheerio to parse HTML, we can use selectors similar to jQuery to select elements based on text content. This is commonly used for extracting or manipulating HTML elements that contain specific text.

Here is a basic example demonstrating how to use Cheerio to select elements based on their text content:

Example Setup

First, assume the following HTML structure:

html
<html>
<head>
    <title>测试页面</title>
</head>
<body>
    <div>
        <p id="p1">Hello World</p>
        <p id="p2">Hello Cheerio</p>
        <p id="p3">Welcome to OpenAI</p>
    </div>
</body>
</html>

Our goal is to select the <p> tag containing the text 'Cheerio'.

Using Cheerio to Select Elements

First, you need to install and import Cheerio:

bash
npm install cheerio

Then, we can write the following JavaScript code to parse the above HTML and select the specified elements:

javascript
const cheerio = require('cheerio');
const html = `...`;

const $ = cheerio.load(html);

// Select the <p> tag containing specific text 'Hello Cheerio'
const textFilter = $('p').filter(function() {
    return $(this).text().trim() === 'Hello Cheerio';
});

console.log(textFilter.html());  // Output: Hello Cheerio

// Use a more complex selector for partial text matching
const containsText = $('p:contains("Cheerio")');
console.log(containsText.html()); // Output: Hello Cheerio

Code Explanation

Loading HTML: Use the cheerio.load method to load the HTML string.
Selecting and Filtering: Use the .filter() method with jQuery-style selectors to select all <p> elements, then filter them using a function that checks if the element's text content exactly matches 'Hello Cheerio'.
Partial Match Selector: Use the :contains() selector to select elements containing specific text, which is very useful in practical applications, especially when you don't need exact text matching.

This allows us to select and manipulate HTML elements based on their text content using Cheerio. This technique is very useful in web scraping or test automation, helping developers to precisely select and operate on specific content.

2024年8月10日 01:09 回复

1个答案

Example Setup

Using Cheerio to Select Elements

Code Explanation

你的答案