如何通过XPath/CSS提取网页中无标签包裹的指定文本standard_user？

XPath 解决方案 #

XPath对文本节点的支持很灵活，有两种直接定位目标文本的方式：

• 方式一：通过兄弟节点定位
  利用following-sibling轴选取<h4>标签之后的第一个文本节点，直接精准获取目标内容：

  //div[@id='login_credentials']/h4/following-sibling::text()[1]
  

  原理：following-sibling::text()会选取当前节点之后的所有同级文本节点，[1]限定取第一个，正好对应standard_user。

• 方式二：通过文本内容筛选
  直接筛选父元素下内容匹配的文本节点，适合明确知道目标文本内容的场景：

  //div[@id='login_credentials']/text()[normalize-space()='standard_user']
  

  原理：normalize-space()会去除文本前后的空白字符（换行、空格等），确保精准匹配目标内容。

CSS 解决方案 #

CSS选择器本身无法直接选取文本节点，需要配合代码（以JavaScript为例）处理父元素的子节点：

// 先获取包含目标文本的父元素
const credentialsContainer = document.querySelector('#login_credentials');
// 遍历子节点，筛选出内容匹配的文本节点
const targetTextNode = Array.from(credentialsContainer.childNodes).find(node => 
  node.nodeType === Node.TEXT_NODE && node.textContent.trim() === 'standard_user'
);
// 提取并格式化文本
const targetText = targetTextNode ? targetTextNode.textContent.trim() : '';

原理：先获取父容器，再遍历其所有子节点，筛选出类型为文本节点且内容匹配的节点，最后提取文本内容。

内容的提问来源于stack exchange，提问作者RK143