0

Using Ajax to fetch XML data. question about blank text nodes

I read this question/ answer here Javascript/XML - Getting the node name

and this helped my understanding a ton about how the structure is set up however I still have a question or two.. when he mentions this part:

"Text node with a carriage return and some spaces or tab"

How would you test to see f you have gotten an empty text node like this? I've tried testing to see:

if nodeValue == null
nodeValue == "null"
nodeValue == ""
nodeValue == " "

none of these appear to be working

I figured maybe the length would be 0 so I tested for .length and it returned 5 (1 return key and 4 tabs.. added an extra tab in there and tested again it returned 6)

I then googled how to remove whitespace and used these:

.replace(/\s+/g, ' ');
.replace(/^\s+|\s+$/g, '');

Neither worked and still said the .length was still 5

Reason I want to test for this is because what if I don't know each of the element node names before hand or exactly how the DOM is set up.

Or is there a better way to navigate without bothering to check if a text node is just the tabs/spaces/return key?

Community
  • 1
  • 1
Bonte
  • 9
  • 3
  • 6
  • `if (!nodeValue.trim().length)` should suffice – Xotic750 Jun 22 '13 at 22:10
  • @Xotic750: There was no `trim` on `String.prototype` until relatively recently, so relying on it can be problematic. Does IE8 have it? (I don't have a test machine handy...) – T.J. Crowder Jun 22 '13 at 22:10
  • `if ( ! nodeValue.replace(/(\r\n|\n|\r|\s|\t)/gm,"").length )` – adeneo Jun 22 '13 at 22:11
  • There are many different `trim` shims available for older browser that do not support it, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim) has one or [es5_shim](https://github.com/kriskowal/es5-shim) @T.J. Crowder IE9+ – Xotic750 Jun 22 '13 at 22:15

1 Answers1

2

.replace(/^\s+|\s+$/g, ''); works unless the spaces/tabs aren't really spaces and tabs, but one of the various other Unicode space-like characters. So I'm guessing you weren't quite using it correctly.

This would be how to use it:

if (!textNode.nodeValue.replace(/^\s+|\s+$/g, '')) {
    // Node is empty
}

Example: Live Copy | Live Source

var xml = parseXml("<test>\n\t\t\t</test>");
var textNode = xml.documentElement.firstChild;
display("textNode.nodeValue.length = " +
        textNode.nodeValue.length);
display('Is "empty"? ' +
        (!textNode.nodeValue.replace(/^\s+|\s+$/g, '')));

function display(msg) {
  var p = document.createElement('p');
  p.innerHTML = String(msg);
  document.body.appendChild(p);
}

Output:

textNode.nodeValue.length = 4
Is "empty"? true

(Where parseXML is from this answer.)


But we really don't need to do a replace (although the overhead of doing it is trivial). A test like this would do it:

if (/^\s*$/.test(textNode.nodeValue)) {
    // The node is "empty"
}

That regular expression (zero or more whitespace characters with anchors at both ends) will only match a string that's already empty or consists only of whitespace characters.

Community
  • 1
  • 1
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • @TJ thanks. I was using it wrong. I did it just like you had and then changed it to try in my code.. worked both times. Where do I find out what all the different characters mean in the function? s and g etc etc – Bonte Jun 22 '13 at 22:22
  • Indeed. It was more the meaning than a final solution. I will remove it (so it isn't used as a solution) as you have updated :) +1 – Xotic750 Jun 22 '13 at 23:03