Javascript 在Puppeter中剥离DOM元素，而不使用CSS选择器？_Javascript_Xpath_Css Selectors_Puppeteer

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

javascript xpath

Javascript 在Puppeter中剥离DOM元素，而不使用CSS选择器？,javascript,xpath,css-selectors,puppeteer,Javascript,Xpath,Css Selectors,Puppeteer,我想从Puppeter中的DOM中删除一些元素和注释。这些项目没有我可以使用CSS选择的可识别ID、类或属性。但是，它们可以由内部字符串标识，并且一些元素可以包装在人类可读的注释中。我迄今为止的努力：使用CSS选择器似乎是不可能的，因为它们只适用于ID或类：。所以我试着用XPath实现它一些元素可以使用XPath进行选择（并可能被删除），但我对Puppeter和XPath都是新手。我在下面提供了我失败的尝试我可以改为使用正则表达式，但我不知道在解析DOM的HTML后如何从DOM中删除字符

我想从Puppeter中的DOM中删除一些元素和注释。这些项目没有我可以使用CSS选择的可识别ID、类或属性。但是，它们可以由内部字符串标识，并且一些元素可以包装在人类可读的注释中。我迄今为止的努力：

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

有什么想法吗？谢谢

因此，在下面的示例中，我想删除

注释之间的元素，以及末尾的

注释：

    <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 -->

您的

xpath

看起来是正确的。Puppeter提供了运行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解决方案的完整代码，在本例中，剥离添加到渲染条目中的元素：

谢谢你看一下@sam-r！你的代码比我的好。您是否也知道如何删除DOM元素？@aljabear，只需调用

el.remove（）

而不是

el.innerText

。谢谢您，我真的很感激！）

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();

   // 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());
    });