如何仅从父标签而不是从子标签获取文本

Posted 2023-03-24

【中文标题】如何仅从父标签而不是从子标签获取文本

【英文标题】：How to get the text only from parent tag and not from the child tag

【发布时间】：2021-09-28 01:18:15

【问题描述】：

我只想从下面的代码中获取文本updated page title

<h2 class="cmp-title__text" xpath="1">
            updated page title
        <span class="gmt_style" aria-hidden="true">Tue, 20 Jul 2021 13:19:22 GMT</span></h2>

我尝试了下面的方法，但它也从 span 标签中获取文本，即Tue , 20 Jul 2021 13:!9:22 GMT。

var pgTitle=element(by.xpath("//h2[@class='cmp-title__text']"));
var pgTitleFromApp = await translatedPgTitle.getText();

输出：

+updated page title
+Tue, 20 Jul 2021 14:02:35 GMT

请帮忙！

【问题讨论】：

有一个线程已经回答了这个问题。 Here。试试看。

【参考方案1】：

给定此 html 片段的 Xpaths 以获取 text 节点：

<h2 class="cmp-title__text">
        updated page title
    <span>Tue, 20 Jul 2021 13:19:22 GMT</span>
    
    second text
    
    <span>Tue, 20 Jul 2021 13:19:22 GMT</span>
    
    third text
    
</h2>

可以使用此 xpath 访问第一个文本节点

//h2[@class='cmp-title__text']/text()[1]

第二个有：

//h2[@class='cmp-title__text']/text()[2]

没有span作为父节点的文本节点：

//h2[@class='cmp-title__text']/descendant::text()[parent::*[name()!='span']]

结果（包括空格）：

     updated page title


second text



third text

第一个带有span父节点的文本节点

//h2[@class='cmp-title__text']/descendant::text()[parent::*[name()='span']][1]

同：

//span[1]/text()

【参考方案2】：

你可以拆分你从getText()得到的字符串

类似这样的：

var all = pgTitleFromApp.split(' ');
var title = all[0] + all[1] + all[2];

【讨论】：

我已经更新了上面的代码，或者这可以用更好的方式完成，但我们需要确定分离正则表达式 b/w updated page title 和 Tue, 20 Jul 2021 13:19:22GMT

【参考方案3】：

免责声明：下一个答案可能不适合您使用的技术的方法，并且答案仅包含纯 javascript 解决方案。

在您的情况下，您可以使用Node.firstChild。但它仅适用于文本始终是第一个孩子的情况。 如果您的文本可以以任何其他顺序放置，您可以使用Node.childNodes 获取所有节点，通过检查Node.nodeType 是否等于Node.TEXT_NODE 来过滤节点并仅保留文本节点。

<div class="wrapper">
   Some text 1
   <h1>Some text 2</h2>
</div>

const wrapper = document.querySelector('.wrapper')
const parentTextNode = [...wrapper.childNodes]
   .filter(node => node.nodeType === Node.TEXT_NODE)[0];

console.log(parentTextNode); // Some text 1