任何给定DOM元素的Javascript字数

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (10)

例如,我想知道是否有方法来计算div内的单词。假设我们有这样一个div:

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

然后让JS函数返回一个4的整数。

这可能吗?我已经使用表单元素完成了这项工作,但似乎无法为非表单元素完成此工作。

有任何想法吗?

提问于
用户回答回答于

如果你知道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,那么您可能需要检查它。

我们分裂上面的字符串的方式将会把两个连续的空格作为一个单词。如果你期望这样的事情(甚至如果你不这样做),最好通过分裂一个正则表达式而不是简单的空间字符来避免它。牢记这一点,而不是做上面的分割,你应该做这样的事情:

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

唯一的区别在于我们传递给分割函数的东西。

用户回答回答于

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);

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

扫码关注云+社区