javascript - Cheerio 将标签值 <h1> 替换为 <h2> 并保留 insideText

标签 javascript jquery next.js13 cheerio

我认为这很简单,但它在简单地用另一个标签值替换标签值时给我带来了一些问题。我正在获取 HTML 代码,并将 className 添加到每个 H 标签,但我还需要将其更改为从旧存储的 html 到我的 nextJs 项目的所有 h3 标签,

起始代码

<h1>Header one</h1>
<h2>header two </h2>

我需要他们

<h3>Header one</h3>
<h3>header two </h3>

当前代码除注明外均有效

  let desc= '
        <h1>Header one</h1>
        <h2>header two </h2>';
    const $ = cheerio.load(desc);
    $("p").addClass("my-4");
    $("h1").replaceWith("h3"); // <-- Not the desired result here
   
    $("h1").addClass("text-3xl font-semibold my-6 md:text-4xl");
    $("h2").addClass("text-3xl font-semibold my-6 md:text-4xl");
    $("h3").addClass("text-3xl font-semibold my-6 md:text-4xl");
    $("h4").addClass("text-3xl font-semibold my-6 md:text-4xl");
    $("h5").addClass("text-3xl font-semibold my-6 md:text-4xl");
    $("h6").addClass("text-3xl font-semibold my-6 md:text-4xl");
 

最佳答案

我认为您正在寻找 replaceWith 回调版本,它可以让您动态地将所需的 HTML 标记包装在匹配元素的 innerHTML 上,而不是硬编码字符串:

const cheerio = require("cheerio"); // ^1.0.0-rc.12

const html = `<h1>Header one</h1><h2>Header two</h2>`;
const $ = cheerio.load(html);
$("h1, h2").replaceWith((_, e) => `<h3>${$(e).html()}</h3>`);
console.log($.html());

输出:

<html><head></head><body><h3>Header one</h3><h3>Header two</h3></body></html>

关于javascript - Cheerio 将标签值 <h1> 替换为 <h2> 并保留 insideText,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/77574909/

相关文章:

reactjs - 如何在 React 18 - nextjs 14 应用程序路由器中从客户端组件渲染服务器组件?

next.js - next.js 13中,单独指定了layout.tsx,但是出现了根布局中组件的问题

javascript - 我正在尝试将数组数组中的数字与具有类别中列出的文件名列表的对象相关联

javascript - 如何使用黑名单数组和正则表达式禁止带有变音符号的单词?

javascript - 按父id递归删除数组中的对象

javascript - 如何在不刷新页面的情况下使用 JQuery 或 AJAX 调用 PHP 脚本?

Jquery Nth-Child 问题

reactjs - 在 NextJS 13.4 API 中抛出错误消息的正确方法是什么? (响应、NextAPI 响应、NextResponse)

javascript - 按名称获取对方法函数的引用?

javascript - 在 Angularjs Controller 中用作计数器的静态 javascript 变量