XPath 表达式

支持 XPath 1.0 · 按 Enter 执行

快捷示例：

HTML 源码

42 行 ↑ 上传文件

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>XPath 测试示例页</title>
</head>
<body>
  <header id="site-header">
    <h1 class="title">欢迎来到 IqsBot</h1>
    <nav>
      <a href="/home">首页</a>
      <a href="/tools">工具箱</a>
      <a href="/about">关于</a>
    </nav>
  </header>

<main>
    <div class="content" id="main-content">
      <h2>开发者工具</h2>
      <p>IqsBot 提供超过 40 款免费在线开发者工具，帮助您提升开发效率。</p>
      <p>所有工具均在<strong>浏览器本地</strong>运行，<em>数据不会上传</em>服务器。</p>

<ul id="tool-list">
        <li data-id="json">JSON 格式化</li>
        <li data-id="base64">Base64 编解码</li>
        <li data-id="regex">正则表达式测试</li>
        <li data-id="xpath">XPath 测试</li>
      </ul>
    </div>

<aside class="sidebar">
      <h3>相关链接</h3>
      <a href="https://iqsbot.com" class="ext-link" target="_blank">访问官网</a>
      <a href="/dev-tools" class="ext-link">工具箱首页</a>
    </aside>
  </main>

<footer>
    <p>&copy; 2025 IqsBot. All rights reserved.</p>
  </footer>
</body>
</html>

渲染预览高亮 = 红色边框 + 浅黄底

匹配结果

输入 XPath 表达式后点击「执行查询」，或按 Enter 键

什么是 XPath？

XPath（XML Path Language）是一种在 XML 和 HTML 文档中查找和定位节点的路径表达式语言，是 W3C 标准（XPath 1.0 / 2.0 / 3.0），被广泛应用于爬虫开发、网页数据提取、XML 解析和自动化测试等场景。

XPath 使用类似文件系统路径的语法来描述文档结构中的节点关系，例如 //div[@class='content']/p 表示"所有 class 属性为 content 的 div 下的所有 p 元素"。相比 CSS 选择器，XPath 的优势在于支持更复杂的轴关系（祖先、兄弟、父节点等）和基于文本内容的条件筛选。

为什么需要 XPath 测试工具？

在实际开发中，编写和调试 XPath 表达式是一件容易出错的工作：

网页结构复杂，嵌套层级深，手写路径容易遗漏中间节点
属性值带引号时，需要区分单双引号嵌套，语法易错
条件表达式 [] 中的逻辑判断不符合直觉，需要实时验证
不确定表达式匹配了几个元素、匹配了哪些元素

使用 IqsBot XPath 测试工具，你可以粘贴 HTML 源码，输入 XPath 表达式，立即看到匹配结果和可视化高亮，无需在浏览器控制台反复尝试 $x()，也无需写 Python 脚本反复调试。

相比其他在线 XPath 工具，IqsBot 的核心优势是纯浏览器端运行——你的 HTML/XML 代码不会上传到任何服务器，完全在本地解析和匹配。对于包含内部页面结构、业务数据等敏感信息，这一点尤其重要。

如何使用 IqsBot XPath 测试工具

基础用法

输入 HTML 源码：将需要测试的 HTML 或 XML 代码粘贴到左侧编辑区，或点击上传按钮加载本地文件
编写 XPath 表达式：在下方的输入框中输入 XPath 1.0 表达式
点击查询：点击「执行查询」按钮，右侧预览区会自动高亮匹配元素，下方显示匹配结果列表

高级功能

实时渲染预览：右侧 iframe 实时渲染你输入的 HTML 代码，直观看到页面结构
DOM 高亮定位：匹配的元素会以红色边框 + 浅黄色背景高亮显示，一目了然
结果分类展示：匹配结果按节点类型分类显示——元素显示标签名和 id/class、属性显示名称和值、文本显示截断内容
一键清除高亮：测试完成后点击「清除高亮」恢复原始样式
语法错误提示：当 XPath 表达式存在语法错误时，会显示清晰的错误信息帮助快速修正

常用 XPath 表达式示例

表达式	含义
`//div`	选取文档中所有 div 元素
`//div[@class='content']/p`	选取 class 为 content 的 div 下的所有 p
`//a[@href]`	选取所有带 href 属性的 a 标签
`//ul/li[1]`	选取每个 ul 下的第一个 li（注意不是整个文档第一个）
`(//ul/li)[1]`	选取文档中所有 li 的第一个
`//h1/text()`	选取所有 h1 的文本内容
`//*[@id='main']`	选取 id 为 main 的任意元素
`//a[contains(@href, 'example')]`	选取 href 中包含 example 的 a 标签
`//p[text()='hello']`	选取文本内容恰好为 hello 的 p 元素
`//div/parent::*`	选取所有 div 的父元素

使用示例

假设你有以下 HTML 片段：

<div class="article-list">
  <div class="article">
    <h2><a href="/post/1.html">XPath 入门教程</a></h2>
    <p class="summary">一篇关于 XPath 的详细介绍</p>
    <span class="date">2024-01-15</span>
  </div>
  <div class="article">
    <h2><a href="/post/2.html">CSS 选择器大全</a></h2>
    <p class="summary">CSS 选择器完全参考手册</p>
    <span class="date">2024-02-20</span>
  </div>
</div>

输入 XPath 表达式 //div[@class='article']/h2/a，将匹配到两个 a 元素，并在右侧预览区高亮显示。

输入 //span[@class='date']/text()，将返回两个日期文本节点的内容。

常见问题

Q: 我的 HTML 数据会上传到服务器吗？

A: 绝对不会。 IqsBot 的所有工具都运行在浏览器本地，你粘贴的 HTML 代码完全在本地浏览器解析，数据不会离开你的设备。即使断网，XPath 测试工具依然可以正常使用。

Q: 支持哪些 XPath 版本？

A: 目前支持 XPath 1.0 语法。 XPath 1.0 覆盖了绝大多数日常使用场景，包括：路径表达式、谓语筛选 []、通配符 *、属性选择 @、文本选择 text()、位置函数 position()、字符串函数 contains() / starts-with() / string-length() 等。

Q: XPath 和 CSS 选择器有什么区别？

A: 主要区别有三点：

方向性：CSS 选择器只能向下选择（后代/子元素），XPath 支持任意方向导航——可以向上（parent::）、向兄弟（following-sibling::、preceding-sibling::）
文本匹配：XPath 原生支持基于文本内容的筛选（//p[contains(text(), '关键词')]），CSS 选择器做不到
语法差异：XPath 语法更像文件路径，CSS 选择器更简洁。简单场景下 CSS 选择器更方便，复杂条件筛选时 XPath 更强大

Q: 工具如何处理不完整的 HTML 代码？

**A: 浏览器自身的 HTML 解析器具有容错能力，会自动补全缺失的闭合标签、处理嵌套错误。工具使用浏览器内置的 DOMParser 解析你的代码，因此即使代码不完美，大多数情况下也能正常解析和查询。

Q: 高亮功能在复杂页面上会卡顿吗？

A: 不会。 工具采用高效的节点收集策略——先一次性遍历所有匹配节点到内存数组，再批量应用高亮样式，避免了反复操作 DOM 带来的性能问题。对于包含数百个节点的页面也能流畅运行。