How to get the text of a div which is not a part of any other container in JQuery?

Question

This should be real easy. Given below is the HTML.

<div id='attachmentContainer'>
    #Attachment#
    <span id='spnAttachmentName' class='hidden'>#AttachmentName#</span>
    <span id='spnAttachmentPath' class='hidden'>#AttachmentPath#</span>
</div>  

I want to get just the #Attachment# and not the other text. When I tried

$("#attachmentContainer").text() 

it gives out all #Attachment#, #AttachmentName# as well as #AttachmentPath#. I know I could just put #Attachment# into another span and access it directly but I was just intrigued on how to do this. Any help is much appreciated.

Answer 1

I think the text is actually a text element - a child of the parent div. So you just need to query for the first child. Not sure though. hth

Answer 2

Since your text happens to be the first child node of the <div>:

var firstChild = $("#attachmentContainer")[0].firstChild;
var textValue  = firstChild.nodeType == 3 ? $.trim(firstChild.nodeValue) : "";

The nodeType check is meant to be a safeguard - it makes sure you are actually handling a text node - the firstChild might be something different after all. React accordingly, this is just an example.

To retrieve the value of all text children (or a specific one), just loop over the childNodes collection of your element, concatenating all bits you find into a string:

// the optional "at" parameter lets you define which text node you want
// if not given, this returns all text nodes concatenated
$.fn.ownText = function(at) { 
  var result = [], node = this[0];
  if (!(node && node.childNodes)) return;
  for (var i=0; i<node.childNodes.length; i++) {
    var child = node.childNodes[i];
    if (child.nodeType != 3) continue;
    var t = $.trim(child.nodeValue);
    if (t != '') result.push(t);
  }
  return at ? result[at-1] : result.join(' ');
}

var text = $("#attachmentContainer").ownText();  // all text children
var text = $("#attachmentContainer").ownText(1); // first text child only

Answer 3

This will get you just that items text

var $item = $("#attachmentContainer").clone();
$item.children().remove(); 
alert($item.text());

clone the object so you don't have to remove the actual items children. Then you can remove the child elements and that will leave the innerText of the item you want.

And here's a handy little method to do this easily

jQuery.fn.trueText = function(obj){
    var $item = $(obj).clone();
    $item.children().remove(); 
    return $item.text();
};

Now you can call $("#attachmentContainer").trueText()

Answer 4

$('#attachmentContainer').contents().filter(function(){return this.nodeType==3;}).text()

Answer 5

I think the proper well-formed angle would be to put that first part in a <p> </p> (if a span was not appropriate).

I thought I could get a .filter to work on it, but couldn't quite get it...

Answer 6

Copied from my own answer on a similar thread

This example uses .contents() to get all the children nodes (including text nodes), then uses .map() to turn each child node into a string based on the nodeType. If the node is a text node (i.e. text not within the spans), we return its nodeValue.

This returns a jQuery set containing strings, so we call .get() to get a 'standard' array object that we can call .join() on.

// our 'div' that contains your code:
var $html = $("<div id='attachmentContainer'>\n    #Attachment#\n    <span id='spnAttachmentName' class='hidden'>#AttachmentName#</span>\n    <span id='spnAttachmentPath' class='hidden'>#AttachmentPath#</span>\n</div>");

// Map the contents() into strings
$html.contents().map(function() { 
  // if the node is a textNode, use its nodeValue, otherwise empty string
  return this.nodeType == 3 ? this.nodeValue : ''; 
  // get the array, and join it together:
}).get().join('');

// " 
//     #Attachment# 
//     
//     
// "

If you want to trim extra whitespace, you can use $.trim(this.nodeValue)

If you need to do this a lot, you could even make a plugin (now with some options):

$.fn.directText = function(settings) {
   settings = $.extend({},$.fn.directText.defaults, settings);
   return this.contents().map(function() {
     if (this.nodeType != 3) return undefined; // remove non-text nodes
     var value = this.nodeValue;
     if (settings.trim) value = $.trim(value);
     if (!value.length) return undefined; // remove zero-length text nodes
     return value;
   }).get().join(settings.joinText);
};

$.fn.directText.defaults = {
   trim: true,
   joinText: ''
};