Cheerio替换HTML标签问题：将h1/h2转为h3并保留内容

问题根源 #

你用$('h1').replaceWith('h3')的写法只会把原h1标签替换成字符串文本h3，并非创建一个<h3>DOM元素，自然会丢失原标签的内部内容和结构，达不到预期效果。

正确实现方案 #

通过遍历目标标签、创建新元素并保留原内容的方式来处理，代码示例如下：

const cheerio = require('cheerio');

// 示例遗留HTML内容
const legacyHtml = `
<h1>一级标题示例</h1>
<h2>二级标题示例</h2>
<h3>原有三级标题</h3>
<h4>四级标题示例</h4>
`;

const $ = cheerio.load(legacyHtml);
const customClass = 'nextjs-heading'; // 你需要添加的指定类名

// 处理h1、h2：替换为h3并添加类名
$('h1, h2').each((index, element) => {
  const $original = $(element);
  // 创建新的h3元素，复制原标签的内部内容，添加指定类名
  const $newHeading = $('<h3>').html($original.html()).addClass(customClass);
  // 用新元素替换原标签
  $original.replaceWith($newHeading);
});

// 给剩余的标题标签（h3-h6）统一添加指定类名
$('h3, h4, h5, h6').addClass(customClass);

// 输出处理后的HTML
console.log($.html());

代码说明 #

• 用each()遍历每个h1/h2元素，确保逐个处理，避免批量操作的遗漏
• $('<h3>')创建的是Cheerio可操作的DOM元素，而非纯字符串
• html($original.html())完整保留原标签内部的文本、子元素及格式
• 分开处理替换和非替换的标题，确保所有标题都能添加指定类名
• 最终输出的HTML中，原h1/h2会被替换为带类名的h3，原有h3-h6也会加上目标类名

内容的提问来源于stack exchange，提问作者Radium Chris