javascript - 在 css 选择器中使用通配符属性不会返回任何匹配项

Question

我想在运行 puppeteer 时使用以下 CSS 选择器来查找 HTML 元素。

代码:

let items = await page.$$eval('a.a-link-normal[href~="/product/"] > img', nodes => nodes.map(n => { ... }));

它不返回任何内容。当我删除 " 时，它说它无效。当我在 https://try.jsoup.org/ 上尝试选择器时，效果很好。

当我使用正则表达式运行稍微修改过的代码时，它也能正常工作:

let items = await page.$$eval('a.a-link-normal > img', nodes => 
  nodes.map(n => { 
   console.log(n.href.match(/product/)) // returns something
   ...
  })
);

我哪里出错了？

要检查的示例 HTML 代码:

<td class="productRowColumn">
  <a class="a-link-normal" href="/product/testprod/asc/">
    <img alt="" src="sampleimg.jpg" aria-hidden="true" height="28" width="45" title="sampleProductTitle">
  </a>
</td>

Answer 1

回答你的问题，

您应该切换[href~="/product/"]
对于 [href^="/product/"] 或 [href*="/product/"]

~= 包含单词(不是您所需要的)。
^= 开头为。
*= 包含子字符串。

导致你的 css 选择器看起来像这样:

'a.a-link-normal[href^="/product/"] > img'