java - 基于 Element 实例派生 CSS 选择器

Question

背景

许多问题询问如何获得特定的 DOM element给定一个 CSS 选择器。这个问题是关于反方向的。使用 jsoup 解析文档, 但可以很容易地转换为以下任何一种:

• jdom
• dom4j
• HtmlUnit

用例

对于特定的问题领域(例如化合物)，成千上万的网页以类似的方式列出化学品，但不同网站的标记不同。例如:

<div id="chemical-list">
  <div class="compound">
    <span class="compound-name">water</span>
    <span class="compound-periodic">H2O</span>
  </div>
  <div class="compound">
    <span class="compound-name">sodium hypochlorite</span>
    <span class="compound-periodic">NaClO</span>
  </div>
</div>

另一个网站可能会以不同的方式列出它们:

<ul class="chemical-compound">
  <li class="chem-name">water, H2O</li>
  <li class="chem-name">sodium hypochlorite, NaClO</li>
</ul>

另一个站点可能再次使用不同的标记:

<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr><td>water</td><td>H2O</td></tr>
    <tr><td>sodium hypochlorite</td><td>NaClO</td></tr>
  </tbody>
</table>

下载了数千个站点中每个站点的几个示例页面。然后，使用现有的化学品列表，检索候选网页元素列表相对简单。使用 jsoup，这很简单:

  Elements elements = chemicals.getElementsMatchingOwnText( chemicalNames );

这将允许对数千页进行高精度分析。 (该页面可以讨论水和次氯酸钠的应用，但仅分析列表。)了解 CSS 将大大简化分析并提高其准确性。

另一种方法是处理整个页面以查找“组”化学品，然后尝试提取列表。这两个问题都很困难，但使用 CSS 选择器跳转到页面中的确切位置效率更高，而且可能更准确。这两个问题都需要一些手工制作，但我想尽可能地自动化。

问题

上述 API 似乎没有在给定 Element instance 的情况下生成 CSS 选择器的方法。 (越独特越好)。可以遍历父元素并手动生成选择器。这一直是demonstrated使用 JavaScript在几个questions .还有生成 XPath 的答案, 并且有可能使用 Selenium .

具体来说，你会怎么做:

String selector = element.getCSSPath();
Elements elements = document.select( selector );

这将:

1. 返回给定元素的 CSS 选择器。
2. 在文档中搜索给定的 CSS 选择器。
3. 返回与选择器匹配的元素列表。

第二行不是问题；第一行有问题。

问题

什么 API 可以从 DOM 元素生成 CSS 选择器(尽可能唯一)？

如果没有现成的 API，那会很高兴知道。

Answer 1

截至 2014-09-28/1.8.1 JSoup 通过 pull request 方法具有此功能(感谢 Element.cssSelector() ) .

cssSelector

public String cssSelector() - Get a CSS selector that will uniquely select this element. If the element has an ID, returns #id; otherwise returns the parent (if any) CSS selector, followed by '>', followed by a unique selector for the element (tag.class.class:nth-child(n)).

Returns: the CSS Path that can be used to retrieve the element in a selector.

这将返回选择器，如果存在，则使用元素 ID 返回唯一元素，否则创建 tag.class.class:nth-child(n) 形式的选择器。

例如:“html > body > h2.section:nth-child(3)”