无需登录 数据私有 本地保存

XPath选择器测试工具 - 对HTML文档提取

12
0
0
0
HTML 文档
输入HTML片段或完整文档，解析器会自动补全结构
XPath 表达式
//
点击 执行 或按 Ctrl+Enter 查看匹配结果
输入XPath表达式后执行查询
XPath 语法速查表
表达式说明示例
//tagname选取所有指定标签的元素//div 所有div
/从根节点选取（绝对路径）/html/body/div
//从任意位置选取（相对路径）//p 任意位置的p
.当前节点./div
..父节点../div
[@attr]选取具有指定属性的元素//a[@href]
[@attr='val']属性精确匹配//div[@class='main']
[@attr!='val']属性不等于//div[@class!='x']
contains(@attr,'v')属性包含某值//div[contains(@class,'active')]
starts-with(@attr,'v')属性以某值开头//input[starts-with(@name,'user')]
text()选取文本节点//h1/text()
@attr选取属性节点//a/@href
[position()=n]按位置选取（从1开始）//li[position()=1]
[n]第n个（简写）//li[3]
[last()]最后一个//li[last()]
[last()-1]倒数第二个//li[last()-1]
count(expr)计数函数count(//div)
string(expr)转换为字符串string(//title)
normalize-space()去除多余空白//h1[normalize-space()='Hello']
parent::*父元素（轴）//div/parent::section
ancestor::tag祖先元素//p/ancestor::div
following-sibling::*后续兄弟节点//h1/following-sibling::p
preceding-sibling::*前面兄弟节点//p/preceding-sibling::h2
child::*所有子元素//ul/child::li
|联合（并集）//h1 | //h2 | //h3
and / or逻辑运算符//div[@a='1' and @b='2']
> / <大于/小于比较//div[position()>3]
*通配符（任意元素）//div/* div下所有子元素
@*任意属性//div[@*] 有任意属性的div
常见问题 (FAQ)
什么是 XPath？

XPath（XML Path Language）是一种用于在 XML 和 HTML 文档中定位节点的查询语言。它通过路径表达式来选取文档中的元素、属性、文本等节点，广泛应用于网页爬虫、自动化测试（如 Selenium）、XSLT 转换等场景。

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

CSS 选择器主要用于样式匹配，语法简洁，适合简单的元素选择。XPath 更强大，支持双向遍历（向上查找父元素、祖先、兄弟节点）、条件函数（contains、starts-with）、文本内容匹配、计数等复杂操作，但语法相对复杂。对于需要精确定位的场景，XPath 更加灵活。

为什么我的 XPath 没有匹配到任何元素？

常见原因：① 输入的HTML被DOMParser自动补全了<html>、<head>、<body>等结构，导致绝对路径变化——建议使用 // 相对路径；② HTML标签在解析后统一转为小写，XPath中需使用小写标签名；③ 属性值大小写敏感，需精确匹配；④ 命名空间问题（普通HTML通常无此问题）。

绝对路径和相对路径的区别？

绝对路径以 / 开头，从文档根节点开始逐级定位，如 /html/body/div/p，路径长、脆弱、不灵活。相对路径以 // 开头，从文档任意位置搜索，如 //p，更灵活健壮。推荐优先使用相对路径。

如何处理动态class属性？

HTML元素的class可能包含多个值（如 class="btn primary active"），使用 contains(@class, 'active') 比 @class='active' 更可靠，因为后者要求完全匹配整个class字符串。

XPath中如何选取文本内容？

使用 text() 函数选取文本节点，如 //h1/text() 获取h1的文本内容。要按文本匹配元素，使用 //div[text()='Hello'] 或 //div[contains(text(),'关键词')]。注意 normalize-space() 可去除多余空白后再匹配。

这个工具支持哪些XPath版本？

本工具使用浏览器内置的 document.evaluate() API，支持 XPath 1.0 标准。XPath 1.0 涵盖了绝大多数常用场景，包括节点选择、谓语过滤、核心函数（count、contains、starts-with、normalize-space等）和轴（axes）。不支持 XPath 2.0/3.0 的高级特性（如正则匹配、序列等）。

为什么DOMParser会自动添加html/head/body标签？

浏览器的DOMParser在解析HTML时会按照HTML规范自动构建完整的文档树结构。即使你只输入了一个片段（如 <div>test</div>），解析器也会补全为 <html><head></head><body><div>test</div></body></html>。这是正常行为，使用 // 相对路径即可避免此问题。

🔧 相关工具