Get the text after span element using jquery

Question

I have this html code

<div id="mydiv">
    <div>
        <span>Text inside span</span>
        Text next to span
    </div>
    <div>
        Contents inside the 2nd div element...
    </div>
</div>

I wanted to get the "Text next to span". I tried this code JQuery code

var a = $('#mydiv div').first().find('span').parent().text();
alert(a);

The output of the jquery code above is this:

Text inside span
Text next to span

What should be the right thing to do to just get only the "Text next to span"?

See http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery — nikc.org, Aug 03 '11 at 10:34
Possible duplicate of [Using .text() to retrieve only text not nested in child tags](https://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags) — Evan Carroll, Jan 06 '19 at 09:11

score 62 · Accepted Answer · edited May 13 '23 at 12:18

var a = $('#mydiv div').first().contents().filter(function() {
  return this.nodeType == 3;
}).text();

console.log(a);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv">
  <div>
    <span>Text inside span</span> 
    Text next to span
  </div>
  <div>
    Contents inside the 2nd div element...
  </div>
</div>

This gets the contents of the selected div, and filters the matched set, returning only elements with nodeType == 3, which are text nodes.

score 12 · Answer 2 · answered Jun 13 '13 at 15:59

12

I got it by this:

$('#mydiv div').first().contents().eq(1).text();

answered Jun 13 '13 at 15:59

Sean Don

159
1
3

score 9 · Answer 3 · edited Aug 03 '11 at 13:15

9

Use this code:

 $('#myDiv')
  .contents()
  .filter(function() {
    return this.nodeType == Node.TEXT_NODE;
  }).text();

edited Aug 03 '11 at 13:15

Perception

79,279
19
185
195

answered Aug 03 '11 at 10:39

Tushar Ahirrao

12,669
17
64
96

5

It's better to use `nodeType == 3` rather than the `TEXT_NODE` constant, which is not supported by IE. – James Allardice Aug 03 '11 at 10:42
@James thanks, I was unknown about the integer value of nodeType – Tushar Ahirrao Aug 03 '11 at 10:56

Nor.Z · Answer 4 · 2023-01-13T13:08:36.407

0

Use Node.nextSibling

let jqElt_SearchRegion = $('#mydiv div').first();
let jqElt_SearchPoint = jqElt_SearchRegion.find('span');

let node_Sibling = jqElt_SearchPoint[0].nextSibling; // https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling
console.log(node_Sibling.textContent); // Text next to span.

_{^{(if jQuery is not a strict requirement)}}

edited Jan 13 '23 at 13:08

answered Jan 13 '23 at 13:01

Nor.Z

555
1
5
13

Get the text after span element using jquery

4 Answers4

Linked

Related