前言
在前端开发中，很多时候我们需要从 HTML 或 XML 文档中提取数据。在这种情况下，XPath 是一个非常强大和方便的工具。有了 XPath，我们可以通过一些表达式来定位我们需要的节点，而不需要从头开始遍历文档。
在 JavaScript 中，npm 包 xpath.js 是一个流行的 XPath 库，它可以让前端工程师更加容易地使用 XPath 定位和提取数据。在本文中，我们将深入介绍如何使用 xpath.js 包来进行 XPath 数据提取。
安装
在开始使用 xpath.js 之前，我们需要首先安装它。您可以通过以下命令在您的项目中安装：
npm install xpath
安装完成后，即可正常使用这个库。
基本使用
首先，我们需要通过 DOMParser 将 XML 或 HTML 文档加载为 DOM 文档。您可以通过以下代码来实现：
const parser = new DOMParser() const xmlDoc = parser.parseFromString(xmlString, 'text/xml')
假设您已经加载了您要提取数据的文档，我们可以使用 xpath.js 提供的 select 函数来查找我们想要的节点。例如，如果您想查找所有名称为 book 的节点，可以执行以下代码：
const selectedNodes = document.selectNodes("//book")这个函数接受一个 XPath 表达式作为参数，并返回匹配该表达式的节点集合。在这个例子中，我们使用的简单 XPath 表达式 //book 表示选择所有名称为 book 的节点。
如果您只需要第一个匹配的节点，可以使用 select1 函数。例如，如果您只需要第一个名称为 book 的节点，可以执行以下代码：
const selectedNode = document.selectSingleNode("//book")在这个例子中，我们使用的是 selectSingleNode 函数。它与 select 函数的不同之处在于它只返回第一个匹配节点。
XPath 表达式
在 XPath 中，存在很多不同类型的表达式，可以实现对节点的选择和提取。
节点选择
您可以使用以下表达式来选择特定类型的节点：
*：选择所有节点。nodeName：选择拥有特定节点名称的节点。@attributeName：选择拥有特定属性名称的节点。
例如，选择所有节点是非常简单的，只需要使用 * 表达式即可：
document.selectNodes("//*");在这个例子中，我们选择了所有节点。
另外一个常见的情况是选择特定名称的节点，例如选择所有名称为 book 的节点：
document.selectNodes("//book");在这个例子中，我们使用了 //book XPath 表达式来选择名称为 book 的节点。如果要选择某个特定节点的某个属性，例如选择所有带有 isbn 属性的节点，可以使用以下表达式：
document.selectNodes("//*[@isbn]");在这个例子中，我们使用了 //*[@isbn] 路径表达式来选择带有 isbn 属性的所有节点。
路径表达式
XPath 还支持路径表达式，可以使用它们来选择节点的子集。
例如，如果您想选择名称为 book 的节点下的所有子元素，则可以使用以下表达式：
document.selectNodes("//book/*");在这个例子中，我们使用了 //book/* 路径表达式来选择所有名称为 book 的节点下的所有子元素。
运算符
XPath 还有一些内置运算符，可以帮助您更精准地选择特定的节点。
以下是一些常用的 XPath 运算符：
and：逻辑 AND 运算符。or：逻辑 OR 运算符。not：逻辑 NOT 运算符。=：等于运算符。!=：不等于运算符。>：大于运算符。>=：大于等于运算符。<：小于运算符。<=：小于等于运算符。+：加法运算符。-：减法运算符。*：乘法运算符。/：除法运算符。%：取模运算符。
例如，如果您想选择价格大于 $40 的所有书籍，则可以使用以下表达式：
document.selectNodes("//book[price > 40]");在这个例子中，我们使用了 XPath 运算符 > 来选择价格大于 40 的书籍。
函数
XPath 也有许多内置函数，可以帮助我们更方便地选择和操作节点。
以下是一些常用的 XPath 函数：
contains(string, substring)：判断指定字符串是否包含某个子串。starts-with(string, substring)：判断指定字符串是否以某个子串开头。ends-with(string, substring)：判断指定字符串是否以某个子串结尾。string-length(string)：返回指定字符串的长度。substring(string, start, length)：返回指定字符串的子串。count(nodeset)：返回指定节点集合中节点的数量。sum(nodeset)：返回指定节点集合中的所有数值之和。floor(number)：返回指定数字的下限整数部分。ceiling(number)：返回指定数字的上限整数部分。round(number)：返回指定数字的四舍五入整数部分。
例如，如果您想选择所有包含 JavaScript 关键词的书籍，则可以使用以下表达式：
document.selectNodes("//book[contains(description, 'JavaScript')]");在这个例子中，我们使用了 XPath 函数 contains 来选择所有包含 JavaScript 关键词的书籍。
示例代码
下面是一个完整的示例，演示如何使用 xpath.js 包来从 XML 文档中提取数据。
-- -------------------- ---- ------- ----- ------ - --- ------------ ----- ------ - --------------------------------- ------------ ----- ----- - ----------------------------- --- ---- - - -- - - ------------- ---- - ----- ----- - ----------------------------------------------- ----- ------ - ------------------------------------------------ ----- ----- - ----------------------------------------------- ------------------- --------- ------- ---------- ------ ----------- -
在这个例子中，我们首先使用 DOMParser 将 xmlString 加载为 DOM 文档。然后，我们使用 selectNodes 函数选择所有名称为 book 的节点，并使用 for 循环迭代每个节点。在循环中，我们使用 selectSingleNode 函数选择每个节点中的 title、author 和 price 元素，并使用 textContent 属性来获取它们的值。最后，我们将这些值输出到控制台。
结论
XPath.js 是一个非常强大和方便的 XPath 库，它可以帮助前端开发人员更方便地提取 XML 和 HTML 文档中的数据。本文中，我们介绍了如何使用 xpath.js 包来进行 XPath 数据提取，并通过一系列实例展示了 XPath 表达式、路径表达式、运算符和函数的使用方法。我们希望这篇文章能够帮助您更好地理解 xpath.js 并使用它来加速您的前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/xpath-js