任何给定 DOM 元素的 Javascript 字数统计

Question

我想知道是否有一种方法可以计算 div 内的单词数。假设我们有一个像这样的 div:

<div id="content">
hello how are you?
</div>

然后让 JS 函数返回整数 4。

这可能吗？我已经对表单元素完成了此操作，但似乎无法对非表单元素执行此操作。

有什么想法吗？

克

Answer 1

如果您知道 DIV 中仅包含文本，您可以KISS :

var count = document.getElementById('content').innerHTML.split(' ').length;

如果 div 中可以包含 HTML 标记，则您将必须遍历其子级来查找文本节点:

function get_text(el) {
    ret = "";
    var length = el.childNodes.length;
    for(var i = 0; i < length; i++) {
        var node = el.childNodes[i];
        if(node.nodeType != 8) {
            ret += node.nodeType != 1 ? node.nodeValue : get_text(node);
        }
    }
    return ret;
}
var words = get_text(document.getElementById('content'));
var count = words.split(' ').length;

这与 jQuery 库用来实现其 text() 效果的逻辑相同。功能。 jQuery 是一个非常棒的库，在这种情况下并不是必需的。但是，如果您发现自己进行了大量 DOM 操作或 AJAX，那么您可能需要检查一下。

编辑:

正如 Gumbo 在评论中指出的那样，我们分割上面字符串的方式会将两个连续的空格算作一个单词。如果您期望出现这种情况(即使您没有)，最好通过正则表达式而不是简单的空格字符进行拆分来避免这种情况。记住这一点，您应该执行以下操作，而不是执行上述拆分:

var count = words.split(/\s+/).length;

唯一的区别在于我们传递给 split 的内容功能。