How to load and manipulate an HTML fragment from a string with Cheerio?

Cheerio is a fast, flexible, and server-side library primarily used for parsing HTML and XML documents, enabling operations similar to those performed with jQuery on the client side. When you need to load and manipulate HTML fragments from strings, Cheerio is highly useful. Here are the steps to load and manipulate HTML fragments using Cheerio:

1. Install Cheerio

First, install Cheerio in your project. If you're using Node.js, install it via npm:

bash
npm install cheerio

2. Load HTML Strings

Loading HTML strings is accomplished using the cheerio.load() method, which returns an interface similar to jQuery for subsequent operations.

javascript
const cheerio = require('cheerio');

// Assume we have an HTML string
const htmlString = `\n<html>\n<body>\n  <h1>Welcome to My Website</h1>\n  <div id="content">\n    <p>This is a paragraph.</p>\n  </div>\n</body>\n</html>\n`;

// Use cheerio to load the HTML string
const $ = cheerio.load(htmlString);

3. Use Cheerio API to Manipulate HTML

Once the HTML string is loaded, you can use syntax similar to jQuery to select and manipulate elements. For example:

javascript
// Modify the h1 tag's text
$('h1').text('Hello, World!');

// Add a new class to the paragraph
$('#content p').addClass('new-class');

// Insert a new element
$('#content').append('<p>New paragraph</p>');

4. Output the Modified HTML

After completing all operations, use the $.html() method to output the modified HTML:

javascript
const modifiedHtml = $.html();
console.log(modifiedHtml);

Example

Suppose you want to find all <p> elements in an HTML string and add a "highlight" class to them. Here's how:

javascript
const cheerio = require('cheerio');
const htmlString = '<p>First Paragraph</p><p>Second Paragraph</p>';

const $ = cheerio.load(htmlString);
$('p').addClass('highlight');

const updatedHtml = $.html();
console.log(updatedHtml);

The output will be:

html
<p class="highlight">First Paragraph</p><p class="highlight">Second Paragraph</p>

Through this example, you can see how easily Cheerio can be used to load and manipulate HTML strings. This is very useful for handling server-side HTML templates, cleaning data, or any scenario requiring server-side DOM operations.

2024年8月16日 23:45 回复

1个答案

1. Install Cheerio

2. Load HTML Strings

3. Use Cheerio API to Manipulate HTML

4. Output the Modified HTML

Example

你的答案