How to get only direct text without tags with jQuery in HTML

Question

I\'ve got an HTML:

1)TEXT THAT I ONLY NEED
some par
..

I need only

Answer 1

This is tricky, because the text is in a text node, and jQuery doesn't support text nodes, only elements. Also because different browsers treat white space in HTML code differently, so you end up with different sets of nodes in different browsers. You can't just get the nodes and rely on that the text node that you want is at the same index all the time.

You can use jQuery to locate an element, and use the DOM to get all the nodes inside it.

Example HTML:

<div id="test">
  <strong>1)</strong>
  TEXT THAT I ONLY NEED
  <p>some par</p>
  <ul>
    <li>asdf</li>
    <li>qwerty</li>
  </ul>
</div>

Use jQuery to find the div, use [0] to get the DOM element out of the jQuery object, and the childNodes property to get its children:

var nodes = $('#test')[0].childNodes;

Then you can use jQuery to loop through the nodes to find the node that is the strong element:

var index;
$.each(nodes, function(i,e){
  if (e.tagName == 'STRONG') {
    index = i;
    return false;
  }
});

Now you can use the DOM to get the text value from the next node:

var text = nodes[index + 1].nodeValue;

Answer 2

var element = $('#element');
var tags = element.find('*');
tags.remove();
var plainText = element.text().trim();
alert(plainText); // prints TEXT THAT I ONLY NEED

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- html -->
<div id='element'>
  <strong>1)</strong>TEXT THAT I ONLY NEED
  <p>some par</p>
  <ul>..</ul>
</div>

Fiddle: https://jsfiddle.net/2b5dh4xc/