替换cheerio选择器中的每个节点
Posted
技术标签:
【中文标题】替换cheerio选择器中的每个节点【英文标题】：Replacing each node in cheerio selector 【发布时间】：2022-01-22 14:37:28 【问题描述】：我正在使用cheerio.js 来解析一些html 文档，但我遇到了一些问题。
问题是我使用的 HTML 文件包含以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</title>
</head>
<body>
<p>Text 1</p>
<p>Text 2</p>
</body>
</html>
现在，我还有一个类似这样的项目的 javascript 数组：
var items = ["<h2>orange</h2>", "<h2>mango</h2>"];
我想要做的只是将每个 P 标签替换为 items 数组中的相应项目，即：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</title>
</head>
<body>
<h2>orange</h2>
<h2>mango</h2>
</body>
</html>
到目前为止我尝试了什么：
var selections = $("p");
for ( let index = 0; index < selections.length; index++ )
selections[index].replaceWith(items[index])
但它说函数 replaceWith() 无效
【问题讨论】：
你检查过选择的内容吗？它是否包含任何p 节点？
是的。它适用于其他功能，例如获取它的 html，或获取它的属性、innerText、内容和所有内容，除了没有替换功能
请阅读How does accepting an answer work?。不要在问题中编辑“已解决”一词。
【参考方案1】：
解决方案：
使用 each 方法，可以轻松处理特定元素
解决上述问题：
var items = ["<h2>orange</h2>", "<h2>mango</h2>"];
$("p").each((index, element) => $(element).replaceWith(items[index]))
基本上，每个方法都会调用一个回调函数，其中 element 是该特定元素的选择器，index 是该项目在该选择中的位置。
更多参考，请查看：https://cheerio.js.org/classes/Cheerio.html#each
【讨论】：
以上是关于替换cheerio选择器中的每个节点的主要内容，如果未能解决你的问题，请参考以下文章
具有变量值的 nth-child 选择器选择资源管理器中的所有元素