4

假设我有这样的标记

<html id="test">
<body>
Some text node.
<div class="cool"><span class="try">This is another text node.</span></div>
Yet another test node.
</body>
</html>

我的js代码

function countText(node){
 var counter = 0;
 if(node.nodeType === 3){
     counter+=node.nodeValue.length;
     countText(node);
 }
 else{}
}

现在如果我想计算文本节点

console.log("count text : " + countText(document.getElementById("test"));

这应该返回给我计数，但它不起作用，而且我应该在其他条件下放置什么。我从来没有使用过nodeType，所以在使用它时遇到了问题。任何帮助将不胜感激。

4

2 回答 2

7

您的代码中有几处错误：

  • 您的 HTML 格式不正确。
  • 您正在将文本附加到您的counter而不是增加它。
  • 你永远不会遍历 a 节点的子节点，你总是将同一个节点传递给递归调用。
  • 如果节点不是文本节点，您什么也不做。

这将起作用：

function countText(node){
    var counter = 0;
    if(node.nodeType === 3){
        counter++;
    }
    else if(node.nodeType === 1) { // if it is an element node, 
       var children = node.childNodes;    // examine the children
       for(var i = children.length; i--; ) {
          counter += countText(children[i]);
       }
    }
    return counter;  
}

alert(countText(document.body));

演示

哪个数字对应哪个节点类型可以在这里找到。

更新：

如果要计算单词，则必须先将每个文本节点拆分为单词。在下文中，我假设单词由空格分隔：

if(node.nodeType === 3){
    counter = node.nodeValue.split(/\s+/g).length;
}

更新 2

我知道您想使用递归函数，但如果您只想计算单词，那么有一种更简单、更有效的方法：

function countWords(node){
    // gets the text of the node and all its descendants
    var text = node.innerText || node.textContent
    return text.split(/\s+/g).length;
}
于 2011-04-14T00:22:33.070 回答
1

你想要类似的东西

function countTextNodes(node) {
    var n = 0;
    if(node.nodeType == 3)
        n = 1;
    for(var i = 0; i < node.childNodes.length; ++i)
        n += countTextNodes(node.childNodes[i]);
    return n;
}

这可以压缩成更紧凑的代码，但我在这里追求易读性。

在要计算文本节点的根上调用它。例如，要计算整个文档中的文本节点，您可能需要调用countTextNodes(document.getDocumentElement()).

于 2011-04-14T00:14:09.590 回答