(Note: I am a Javascript newbie. I can handle PHP and Java, but this
is unfamiliar territory.)
For a wordcount feature, I need to collect the complete text content
of a 'div' element inside a variable. Because of the issues with
paragraphs and markup, the content is split into different nodes in
the DOM.
For example:
<div>Hello, <p>this text is <span style="font-style:italic">italic</
span></p></div>
This will cause (more or less) a DOM tree like this:
[div]
-Hello,
- [p]
-this text is
-[span]
-italic
Now, my function has, as a starting point, the [div] node that is the
top parent here.
function aggregateTextNode(textNode) {
...
return allText;
}
Since I don't know the depth of the nodes, I am trying to build this
as a recursive function. "depth" is a parameter that ensures I can
limit the recursion to a certain level.
function aggregateTextNode(textNode,depth) {
var text=textNode.nodeValue; // get the text value of the current
node
if (depth==0) return text; // recursion limit reached
for (i=0;i<textNode.childNodes.length;i++) { // if the node has
child nodes, aggregate these
text+=aggregateTextNode(textNode.childNodes[i],depth-1); //
append aggregated text
}
return text;
}
However, no matter where I set the recursion limit, the script
invariably freezes Firefox until the timeout is reached and I can
abort it - infinite loop, apparently.
Can you see what's wrong with my code? It's very clearly the recursion
that causes it, because if the node has no child nodes at all (say
"<div>Just text</div>"), it succeeds. But if there is only a single
child node, it hangs itself.
Meanwhile, I've managed to do it with a very ugly nested loop that can
go three levels deep, but I'd really rather use the recursive approach
if at all possible.
