Question

From below HTML code I want to get all the text except that in ‘text_exposed_hide’ span elements.

Initially I tried to get the text from span with no class names.
But this method misses the text which is not within any span but just in div.

How can I get the required text. I need this code in pure javascript

<div id="id_4f1664f84649d2c59795040" class="text_exposed_root">
9jfasiklfsa
  <span>CT:PFOUXHAOfuAI07mvPC/</span>
  <span>NAg==$1ZUlmHC15dwJX8JNEzKxNDGGT</span>
  dwL/L1ubjTndn89JL+M6z
  <span class="text_exposed_hide">...</span>
  <span class="text_exposed_show">
    <span>MDmclkBPI/</span>
    <span>s4B7R9hJyU9bE7zT10xkJ8vxIpo0quQ</span>
    55
  </span>
  <span class="text_exposed_hide">
    <span class="text_exposed_link">
      <a onclick="CSS.addClass($("id_4f1664f84649d2c59795040"), "text_exposed");">See More</a>
    </span>
  </span>
</div

Edit :

I tried removing nodes with class name ‘text_exposed_hidden’ and then getting text from remaining nodes. Below is the code. But its not working
Control is not entering for loop. Even visibleDiv.removeChild(textExposedHideNodes[0]) is not working. I am running this in Chrome Browser 16.0

    //msg is the parent node for the div
    visibleDiv = msg.getElementsByClassName("text_exposed_root");

    textExposedHideNodes = visibleDiv.getElementsByClassName("text_exposed_hide");
    for(var n = 0;n < textExposedHideNodes.legth ; n++ ) { 
        console.log("Removing");
        msg.removeChild(textExposedHideNodes[n]);
    }

    return visibleDiv.innerText;

Answer 1

This code will collect all text from text nodes who don’t have a parent with the class="text_exposed_hide" and put the results in an array.

It does this non-destructively without removing anything:

function getTextFromChildren(parent, skipClass, results) {
    var children = parent.childNodes, item;
    var re = new RegExp("\\b" + skipClass + "\\b");
    for (var i = 0, len = children.length; i < len; i++) {
        item = children[i];
        // if text node, collect its text
        if (item.nodeType == 3) {
            results.push(item.nodeValue);
        } else if (!item.className || !item.className.match(re)) {
            // if it doesn't have a className or it doesn't match
            // what we're skipping, then recurse on it to collect from it's children
            getTextFromChildren(item, skipClass, results);
        }
    }
}

var visibleDiv = document.getElementsByClassName("text_exposed_root");
var text = [];
getTextFromChildren(visibleDiv[0], "text_exposed_hide", text);
alert(text);

If you want all the text in one string, you can concatenate it together with:

text = text.join("");

You can see it work here: http://jsfiddle.net/jfriend00/VynKJ/

Here’s how it works:

1. Create an array to put the results in
2. Find the root that we’re going to start with
3. Call getTextFromChildren() on that root
4. Get the children objects of that root
5. Loop through the children
6. If we find a text node, collect its text into the results array
7. If we find an element node that either doesn’t have a className or who’s className doesn’t match the one we’re ignoring, then call getTextFromChildren() recursively with that element as the new root to gather all text from within that element