如何用Cheerio移除多层嵌套font元素并保留内部内容？

需求是移除HTML中所有嵌套的<font>元素，同时保留最内层<font>的内容，示例如下：

处理前的HTML：

<body>
  <font>
    <font>
      <font>
        <p>Three fonts deep</p>
      </font>
    </font>
    <font>
      Two fonts deep
    </font>
  </font>
  <font>
    One font deep
  </font>
  No fonts deep  
</body>

处理后的HTML：

<body>
  <p>Three fonts deep</p>
  Two fonts deep
  One font deep
  No fonts deep
</body>

你尝试过的方法 #

• 使用unwrap方法（存在用法错误）：

$('font').each((i, el) => {
  $(el).unwrap();
});

unwrap()的作用是移除当前元素的父元素，而非移除<font>本身，因此无法达到预期效果。

• 使用replaceWith结合全局遍历：

$('*').each((i, el) => {
  if (el.name === 'font') {
    $(el).replaceWith($(el).html());
  }
});

由于遍历是静态的，先处理外层<font>后，内层<font>不会被后续遍历覆盖，因此只能移除最外层元素。

• 有效的while循环方案：

let foundFonts;
do {
  foundFonts = 0;
  $('font').each((i, el) => {
    $(el).replaceWith($(el).html());
    foundFonts++;
  });
} while (foundFonts > 0);

该方法通过循环重复查询并移除<font>元素，直到DOM中无剩余，但每次循环都要重新查询DOM，效率偏低。

高效一次性处理方案 #

可以通过一次性替换所有<font>元素为其内部节点的方式，无需循环即可完成处理：

$('font').replaceWith(function() {
  return $(this).contents();
});

原理说明 #

1. $('font')会一次性选中DOM中所有层级的<font>元素，形成静态集合；
2. replaceWith接收的函数会对每个选中的<font>执行替换操作，将其替换为自身的所有子节点（contents()返回文本节点和元素节点，完整保留原内容结构）；
3. 静态集合包含所有嵌套的<font>元素，即使外层元素被替换，内层元素仍会被依次处理，最终所有<font>都会被移除，仅保留内容。

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