如何使用 cheerio 设置 outerHTML

Question

有人可以回答我，如何使用 cheerio 正确设置元素的外部HTML。我对此有疑问。

示例：假设我下面有一个 HTML 结构

<div class="page-info">
   <span>Here is an example #1</span>
</div>
<div class="page-info">
   <span>Here is an example #2</span>
</div>

通过 cheerio 解析它并添加一些操作

const cheerio = require('cheerio');
const $ = cheerio.load(`above HTML is here`);

let elemList = $('.page-info');
for (const elem of elemList) {
   let innerHtml = $(elem).html(); //<span>Here is an example #1</span>
   let outerHtml = $.html(elem); //<div class="page-info"><span>Here is an example #1</span></div>
   let replacedHtml = '<p>totally new html structure</p>';

   $(elem).html(replacedHtml);
}

因此，我希望所有 div 都替换为 p。但只有 span 被替换为 p。我想得到结果：

<p>totally new html structure</p>
<p>totally new html structure</p>

但它是下一个

<div class="page-info">
   <p>totally new html structure</p>
</div>
<div class="page-info">
   <p>totally new html structure</p>
</div>

我是否在 cheerio 的文档中遗漏了什么？请指出我哪里做错了。

问候，Oleh

Answer 1

使用replaceWith（用内容替换匹配的元素）来替换节点：

$(".page-info").replaceWith("<p>totally new html structure</p>");

使用each:

let elemList = $(".page-info");
elemList.each((i, elem)=> {
   $(elem).replaceWith("<p>totally new html structure</p>")
})

如何使用 cheerio 设置 outerHTML

How to set outerHTML with using of cheerio

html

javascript

node.js

npm

cheerio