Getting the contents of an element WITHOUT its children

Question

I have a mild preference in solving this in pure JS, but if the jQuery version is simpler, then jQuery is fine too. Effectively the situation is like this

<span id="thisone">
 The info I want
 <span id="notthisone">
  I don't want any of this nonsense
 </span>
</span>

I effectively want to get
The info I want
but not
The info I want I don't want any of this nonsense
and I especially don't want
The info I want <span id="notthisone"> I don't want any of this nonsense </span>
which is unfortunately what I am getting right now...

How would I do this?

Answer 1

With js only:

Try it out: http://jsfiddle.net/g4tRn/

var result = document.getElementById('thisone').firstChild.nodeValue;    

​alert(result);​

With jQuery:

Try it out: http://jsfiddle.net/g4tRn/1

var result = $('#thisone').contents().first().text();  

alert(result);​

Bonus:

If there are other text nodes in the outer <span> that you want to get, you could do something like this:

Try it out: http://jsfiddle.net/g4tRn/4

var nodes = document.getElementById('thisone').childNodes;
var result = '';

for(var i = 0; i < nodes.length; i++) {
    if(nodes[i].nodeType == 3) {       // If it is a text node,
        result += nodes[i].nodeValue;  //    add its text to the result
    }
}

alert(result);
​

Answer 2

If you just want the first child then it's rather simple. If you are looking for the first text-only element then this code will need some modification.

var text = document.getElementById('thisone').firstChild.nodeValue;
alert(text);

Answer 3

Have you tried something like this?

var thisone = $("#thisone").clone();
thisone.children().remove();
var mytext = thisone.html();

Answer 4

Pure JavaScript

In this pure JavaScript example, I account for the possibility of multiple text nodes that could be interleaved with other kinds of nodes. Pass a containing NodeList in from calling / client code.

function getText (nodeList, target)
{
    var trueTarget = target - 1;
    var length = nodeList.length; // Because you may have many child nodes.

    for (var i = 0; i < length; i++) {
        if ((nodeList[i].nodeType === Node.TEXT_NODE) && (i === trueTarget)) {
            return nodeList.childNodes[i].nodeValue;
        }
    }

    return null;
}

You might use this function to create a wrapper function that uses this one to accumulate multiple text values.

Answer 5

To get a string of the child text nodes and not the element or other child nodes from a given element:

function getTextNodesText(el) {
  return Array.from(el.childNodes)
    .filter((child) => child.nodeType === Node.TEXT_NODE)
    .map((child) => child.textContent)
    .join("");
}

Answer 6

FROM: http://viralpatel.net/blogs/2011/02/jquery-get-text-element-without-child-element.html

 $("#foo")
        .clone()    //clone the element
        .children() //select all the children
        .remove()   //remove all the children
        .end()  //again go back to selected element
        .text();    //get the text of element