如何使用javascript获取跨度内的内部文本？答案

【问题标题】：How to get the inner Text inside span using javascript?如何使用javascript获取跨度内的内部文本？
【发布时间】：2016-09-28 09:59:21
【问题描述】：

链接在这里； http://heart.bmj.com/content/early/2016/08/10/heartjnl-2016-310003.long

我有；

<span class="cit-title">
    <span class="cit-series-title">Original article
        <span class="cit-sep cit-sep-after-article-series-title">:</span>
    </span>Pregnancy outcomes in patients with pulmonary arterial hypertension associated with congenital heart disease 
</span>

到目前为止我做了什么？

我选择了span.cit-title，但它是innerText

给我；

"Original article: Pregnancy outcomes in patients with pulmonary arterial hypertension associated with congenital heart disease"

我只想得到

"Pregnancy outcomes in patients with pulmonary arterial hypertension associated with congenital heart disease"`

部分。

如何排除带有cit-series-title 类的 span 并获取原始文本？

【问题讨论】：

这是stackoverflow.com/questions/6520192/get-text-node-of-an-element 的副本。你会在那里找到你的答案。
真的需要这么多跨度吗？
我尝试解析 html。所以我不是跨度的作者。 :)

标签： javascript jquery html nextsibling

【解决方案1】：

你想要的文本是.cit-series-title 的下一个兄弟。您可以选择该元素并使用 javascript Node.nextSibling 获取它的下一个同级文本。

var text = $(".cit-title > .cit-series-title")[0].nextSibling.textContent;
console.log(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="cit-title">
    <span class="cit-series-title">Original article
        <span class="cit-sep cit-sep-after-article-series-title">:</span>
    </span>Pregnancy outcomes in patients with pulmonary arterial hypertension associated with congenital heart disease 
</span>

【讨论】：

【解决方案2】：

你可以先获取整个cit-title元素的内容...

var wholeElementText = $('.cit-title').text();

...然后只获取标题文本...

var titleText = $('.cit-title .cit-series-title').text();

...然后然后从wholeElementText中删除titleText

var justThePartYouWant = wholeElementText.replace(titleText, '');

【讨论】：

【解决方案3】：

从span.cit-title中选择数据并将其存储到变量A然后从span.cit-series-title中选择数据并将其存储到变量B中

然后像A.replace(B, ''); 那样做就可以了

【讨论】：

【解决方案4】：

alert($(".cit-title").clone()    
           .children() 
           .remove()   
           .end()      
          .text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="cit-title">
    <span class="cit-series-title">Original article
        <span class="cit-sep cit-sep-after-article-series-title">:</span>
    </span>Pregnancy outcomes in patients with pulmonary arterial hypertension associated with congenital heart disease 
</span>

【讨论】：

【解决方案5】：

我会将 div 存储在一个临时变量中，以便删除不需要的元素并获取文本。

var div = $(".cit-title").clone();
div.find("span").first().remove();
div.text();

【讨论】：

【解决方案6】：

我认为更好的解决方案是将其他文本包装在另一个跨度中，如下所示：

<span class="cit-title">
    <span class="cit-series-title">Original article<span class="cit-sep cit-sep-after-article-series-title">:</span> </span><span class="cit-series-description">Pregnancy outcomes in patients with pulmonary arterial hypertension associated with congenital heart disease</span> </span>

然后您从 .cit-series-description 获取内部文本，而不是从容器中获取。

干杯

【讨论】：