How to get the inner Text inside span using javascript?

Question

The link is here; http://heart.bmj.com/content/early/2016/08/10/heartjnl-2016-310003.long

I have;

<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>

What have I done so far?

I select the span.cit-title but it's innerText

gives me;

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

I want to get only the

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

part.

How can I exclude span with class cit-series-title and get the raw text?

Answer 1

The text you want is next sibling of .cit-series-title . You can select that element and use javascript Node.nextSibling to getting next sibling text of it.

 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> 

Answer 2

You could first get the content of the entire cit-title element...

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

...then get only the title text...

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

...and then remove the titleText from the wholeElementText

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

Answer 3

select data from span.cit-title and store it to variable A and then select data from span.cit-series-title and store it to variable B

then do like A.replace(B, ''); it will work

Answer 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> 

Answer 5

I would store the div in a temporary variable in order to remove the unwanted elements and get the text.

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

Answer 6

I think the better solution is to wrap the other text in another span like this:

 <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> 

And then you get the inner text from .cit-series-description instead form the container.

Cheers