剥离Puppeter中的DOM元素，而不使用CSS选择器

我想从Puppeter中的DOM中剥离一些元素和注释。这些项目没有可识别的ID、类或属性，我可以使用CSS进行选择。然而，它们可能由内部字符串标识，并且一些元素可能被包装在人类可读的注释中。到目前为止我的尝试：

使用CSS选择器似乎是不可能的，因为它们只适用于ID或类：没有CSScontains()选择器。所以我试着用XPath
有些元素可以使用XPath来选择(并可能被删除？(，但我是Puppeter和XPath的新手。我在下面提供了我失败的尝试
我可能会使用正则表达式，但我不知道如何在解析DOM的HTML后从中删除字符串

有什么想法吗？谢谢

因此，在以下示例中，我想删除注释之间的元素，以及末尾的注释：

<html>
<head>
<!-- DELETE ME BEGIN -->
<script>
// delete me
console.log('delete me')
</script>
<!-- DELETE ME END -->
<title>Page Title</title>
</head>
<body>

<!-- DELETE ME BEGIN -->
<style>
body {
/* delete me */
color: red;
}
</style>
<script>
// delete me
console.log('delete me')
</script>
<!-- DELETE ME END-->
<style>
body {
/* keep me  */
color: green;
}
</style>
<script>
// keep me
console.log("keep me")
</script>
<p>Keep me</p>
<!-- keep me -->
</body>
</html>
<!-- DELETE ME -->
<!-- DELETE ME TOO -->

Puppeteer/XPath代码(只是一次尝试，还没有做任何事情(：

const browser = await puppeteer.launch();

const page = await browser.newPage();
page.on("console", (log) => console[log._type](log._text));
const html = await page.evaluate(() => {
var evaluator = new XPathEvaluator();
var result = evaluator.evaluate(
"//script[contains(.,'delete me')]",
document,
null,
XPathResult.ANY_TYPE
);
console.log(result);
return document.documentElement.outerHTML;
});
await browser.close();

您的xpath看起来是正确的。Puppeteer提供页面.$x(表达式(函数来运行xpath:

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://storm-bald-meteorology.glitch.me');
let xs = await page.$x("//script[contains(. ,'delete me')]");
console.log(xs.length);
for (let x of xs) {
let txt = await page.evaluate(el => el.innerText, x);
console.log(txt);
}
await browser.close();

你可以把这个代码复制/粘贴到木偶师操场上试试。我也把你的html放在了小故障上。

注意，对于未来的自己，这是我写的包含@sam-r解决方案的完整代码，在这种情况下，剥离添加到渲染Wayback Machine条目中的元素：

// remove elements by XPath
[
...await page.$x("//script[contains(.,'__wm')]"),
...await page.$x("//script[contains(.,'archive.org')]"),
...await page.$x("//style[contains(.,'margin-top:0 !important;n  padding-top:0 !important;n  /*min-width:800px !important;*/')]"),
...await page.$x("//comment()[contains(.,'WAYBACK')]"),
...await page.$x("//comment()[contains(.,'Wayback')]"),
...await page.$x("//comment()[contains(.,'playback timings (ms)')]"),
].forEach(async xpath => await page.evaluate(el => el.remove(), xpath));
// remove elements by CSS Selector
await page.evaluate(async () => {
[
document.querySelector('link[href*="/_static/css/banner-styles.css"]'),
document.querySelector('link[href*="/_static/css/iconochive.css"]'),
...document.querySelectorAll("#wm-ipp-base"), // wayback header
...document.querySelectorAll('script[src*="wombat.js"]'),
...document.querySelectorAll('script[src*="archive.org"]'),
...document.querySelectorAll('script[src*="playback.bundle.js"]'),
...document.querySelectorAll("#donato"), // wayback donation header
].forEach((element) => element.remove());
});

相关内容

最新更新

热门标签：