Using HTML like:
<div class="items">
"Items Description"
<ul>
<li>1. One</li>
<li>2. Two</li>
<li>3. Three</li>
</ul>
</div>
How might I use jQuery to get just the text "Items Description" as a String variable, or possibly Object variable I can extract String from?
I'm not sure were to start. I know $('.items') will get the <div> element, but how to get just the Text Node inside?
you can't select it using a selector since it is a text node.
Try
$('.items')[0].firstChild.nodeValue
Demo: Fiddle
Since it is the first node of div.items, you can do that this way:
$('.items').contents()[0]
var text = $('.items').contents().filter(function(){
return this.nodeType === 3
}).text(); // text = "Items Description"
As you can see from some previous answers, there are several different ways to go about this. Just to give you further information, what you appear to be selecting is a "text node", and thus, does not have a "normal" jQuery object (like $("#divID")). However, it is accessible and can be made to work with as such.
First the selection process. There are 2 easy ways to go about this with jQuery, either is your own preference and provide the same result. First select your div element, then get the text node within.
var textNode = $('.items')[0].firstChild;
// is the exact same as
var textNode = $('.items').contents()[0];
The first method uses Vanilla JS to grab the firstChild while the second makes use of jQuery's .contents() method.
As you can see above, since we know the Text node is the first item in the div element, we can use the 0 based index to select the first item using [0]. But what if it's not the first? Then we can make use of .contents in combination with .filter.
var textNodes = $('.items').contents().filter(function(i) { return this.nodeType === 3; });
One big difference you will see in this kinda of call is that this one returns a jQuery object of the text nodes. You'll also notice it will return new line breaks as element objects of the jQuery object. Thus, what you're looking for may not be the first item. If you choose to use filter, there are a couple paths you could go to eliminate problems.
For one, you could simply filter out blank returns.
var textNodes = $('.items').contents().filter(function(i) { return this.nodeType === 3 && $.trim(this.wholeText); }); // if `$.trim(this.wholeText)` is '', then its the same as return `false`
|Or| you could filter explicitly for the text you are looking for with something like:
var textNodes = $('.items').contents().filter(function(i) { return this.nodeType === 3 && $.trim(this.wholeText) == '"Items Description"'; });
Either way, your object is returned as a jQuery object, meaning getting the text is then as easy as textNodes.text(), or, if there is more than one text node found, $(textNodes[0]).text(). Of course, you'll still want to make use of .trim to eliminate any "white space" or "new line breaks".
Now, about getting that text. As I noted previously, jQuery's .trim() method is going to be your best bet in eliminating dead space around your text.
So referring back to our first 2 examples, you could get the text, with no extra space, as simple as:
var txt = $.trim(textNode.wholeText);
// or as one complete line call
var txt = $.trim($('.items')[0].firstChild.wholeText);
var txt = $.trim($('.items').contents()[0].wholeText);
Or, if you wanted to get fancy (for whatever crazy reason) you can convert your previous element object calls and make them actually jQuery objects, then get the text from that:
var jText = $(textNode);
var txt = $.trim(jText.text());
This could be useful if you wanted to do more to the text element, like .wrap it.
Finally, for our last example, if we know only one text node is returned, then we make the call similar to the previous:
var txt = $.trim(textNodes.text());
However, if it's just one of several nodes returned, then we will need to know the index. For example, the following would return the first text node in the jQuery Object list.
var txt = $.trim(textNodes[0].wholeText);
That is just about every easy way. Although, there is no "right" or "wrong" way, as there is only "many ways" to do whatever you need. Just to give an example, the following would also give me the text, "Items Description":
var txt = $('.items').clone().filter(function(i){ $(this).children().remove(); $(this).text($.trim($(this).text())); return i == 0; }).text();
The previous, while far overextended, checks for text nodes that are only the first of the selector given, after it's cloned, and replaces their text with the trimed version as well as removing children and finally returning only the text itself. As you can see, it may be crazy, but with a small understanding of JS, and the access of the jQuery Lib, you can accomplish anything you can think of in almost any way you choose!
