返回

浏览器 XPath 实用技巧

前端

引言

XPath（全称 XML 路径语言）是一种强大的工具，用于从 XML 文档中提取信息。它在浏览器环境中广泛用于从网页中提取数据。然而，与在服务器端使用 XPath 不同，浏览器环境下有一些限制。例如，某些强大的 XPath 标准方法（如正则匹配方法 matches()）不被支持。

技巧 1：利用 contains() 方法

matches() 方法虽然不支持，但我们可以利用 contains() 方法来实现类似的功能。contains() 方法检查一个字符串是否包含另一个字符串。例如：

//input[contains(@id, 'username')]

这将选择所有 id 属性包含字符串 "username" 的 input 元素。

技巧 2：使用 starts-with() 和 ends-with() 方法

starts-with() 和 ends-with() 方法分别检查一个字符串是否以另一个字符串开头或结尾。例如：

//a[starts-with(@href, 'http://')]

这将选择所有 href 属性以 "http://" 开头的 a 元素。

//img[ends-with(@src, '.png')]

这将选择所有 src 属性以 ".png" 结尾的 img 元素。

技巧 3：组合多个谓词

我们可以组合多个谓词来创建更复杂的表达式。例如：

//div[contains(@class, 'product-item') and @data-price > 100]

这将选择所有既包含 "product-item" 类名又具有大于 100 的 data-price 属性的 div 元素。

技巧 4：使用轴

XPath 轴允许我们在文档树中导航。例如：

//input/following-sibling::label

这将选择所有紧跟在 input 元素后面的 label 元素。

//ul/ancestor::li

这将选择所有包含 ul 元素的 li 元素。

技巧 5：利用 XPath 库

还有许多可用于浏览器的 XPath 库。这些库提供了额外的功能，例如支持正则表达式。一些流行的库包括：

结论

尽管在浏览器环境下使用 XPath 有些限制，但通过利用上述技巧，我们可以有效地从网页中提取数据。这些技巧适用于所有现代浏览器，可以帮助我们创建更强大、更灵活的 XPath 表达式。