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?

This is a duplicate of http://stackoverflow.com/questions/6520192/get-text-node-of-an-element. You'll find your answere there. — Max, Sep 28 '16 at 10:02
I try to parse the html. So I am not the author of the spans. :) — user6468132, Sep 28 '16 at 10:04

score 0 · Answer 1 · answered Sep 28 '16 at 10:06

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>

score 0 · Answer 2 · answered Sep 28 '16 at 10:06

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, '');

score 0 · Answer 3 · answered Sep 28 '16 at 10:06

0

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

answered Sep 28 '16 at 10:06

Pratik Bhalodiya

736
7
14

score 0 · Answer 4 · answered Sep 28 '16 at 10:08

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>

score 0 · Answer 5 · answered Sep 28 '16 at 10:09

0

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();

answered Sep 28 '16 at 10:09

Panagiotis Vrs

824
6
16

score -1 · Answer 6 · answered Sep 28 '16 at 10:03

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

How to get the inner Text inside span using javascript?

6 Answers6