0

So let's say I have a very basic page with a body, a single div, and a paragraph element inside with some text. 

<body>
  <div>
    <p>some text</p>
  <div>
</body>

Depending on the browser, the body / div elements will have text nodes (nodeType === 3, nodeValue === "--blank--"). However the P element will have a legitimate text node with nodeValue === "some text".

What I am wondering is what is that "nodeValue" (--blank--) of a 'fake' text-node that represents whitespace equal to, as I want to write an if test that will let me filter out the fake text nodes.

Example:

var body = document.getElementsByTagName("body")[0];  // shortcut to body element.
console.log(body.childNodes[0].nodeValue) // maps to one of the fake text nodes that are blank.
// returns a blank line. What is that "blank" equal to? It's not 'null' or "" or undefined...

Cheers, Alex

Sergio
  • 28,539
  • 11
  • 85
  • 132
dkugappi
  • 2,664
  • 5
  • 21
  • 22
  • 2
    The quickest way to access the body is as the *body* property of the *document*, i.e. [document.body](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201). – RobG Oct 05 '11 at 02:28

2 Answers2

2

Just trim()[docs] the whitespace, and see if there's anything left:

if( body.childNodes[0].nodeValue.trim() ) {
    // more than white space
} else {
    // just white space
}

If there was only white space, you'll end up with a falsey value. Otherwise it will be truthy.

The docs link provides the following compatibility shim:

if (!String.prototype.trim) {
    String.prototype.trim = function () {
        return this.replace(/^\s+|\s+$/g, '');
    };
}
user113716
  • 318,772
  • 63
  • 451
  • 440
2

You could use a regular expression such as:

var re = /\S/; // Match non-whitespace
if (node.nodeType == 3 && re.test(node.nodeValue)) {
  // text node has something other than whitespace
}

noting that there are slight variations in what browsers consider whitespace and what is matched by \s, but that may not be important here.

RobG
  • 142,382
  • 31
  • 172
  • 209