任何给定DOM元素的Javascript字数

Question

我想知道是否有办法计算div中的单词.假设我们有这样的div:

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

然后让JS函数返回4的整数.

这可能吗？我用表单元素完成了这个,但是对于非表单元素似乎无法做到这一点.

有任何想法吗？

G

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函数的内容.

Answer 2

Paolo Bergantino的第二个解决方案对于以空格开头或结尾的空字符串或字符串是不正确的.这是修复:

var count = !s ? 0 : (s.split(/^\s+$/).length === 2 ? 0 : 2 +
    s.split(/\s+/).length - s.split(/^\s+/).length - s.split(/\s+$/).length);

说明:如果字符串为空,则为零字; 如果字符串只有空格,则为零字; 否则,计算没有字符串开头和结尾的空白组的数量.

Answer 3

string_var.match(/[^\s]+/g).length

看起来它比一个更好的方法

string_var.split(/\s+/).length

至少它不会将"单词"计为2个单词 - ['word']而不是['word',''].它并不需要任何有趣的附加逻辑.

Answer 4

或者只是使用Countable.js来完成这项艰巨的工作；）