所有文本区域中的单词总数

问题描述

|| 我正在尝试计算用户在每个文本区域中键入的单词数量，并将它们加起来并在用户键入时向用户显示，到目前为止，我已经做到了：

$(\"[class^=\'count[\']\").bind(\'keyup click blur focus change paste\',function() {

    sum = 0;

        $(\"[class^=\'count[\']\").each(function() {

            var Words = jQuery.trim($(this).val()).split(\' \').length;

            sum += Number(Words);

            if($(this).val() === \'\') { sum = 0; }

            $(\'#maxwords\').children(\'span\').text(sum);



        });



});

这是我的HTML：

<ul id=\"forms\">

            <li><textarea name=\"PresentationAbstract1\"  id=\"PresentationAbstract1\"style=\"width:700px\"></textarea></li>

            <li><textarea name=\"PresentationAbstract2\"  id=\"PresentationAbstract2\"style=\"width:700px\"></textarea></li>

            <li><textarea name=\"PresentationAbstract3\"  id=\"PresentationAbstract3\"style=\"width:700px\"></textarea></li>


            <li id=\"maxwords\">Total words (<span>0</span>)</li>
        </ul>

但是问题在于，直到您到达最后一个文本区域（在本例中为第三个文本区域）之前，此代码都不会输出任何内容，一旦您单击最后一个文本区域，它就会计算出单词数量并输出。 这是所需项目的URL： http://www.meetingproceedings.com/harvester2/wordcount.html。 任何想法，将不胜感激。     

解决方法

您可以通过代码进行一些改进，但最引人注意的是

$(\'#maxwords\').children(\'span\').text(sum);

位于

.each()

迭代中。每次计数文本区域中的单词数时，这将使您的代码写出单词数。然后是

if($(this).val() === \'\') { sum = 0; }

行，如果文本区域内没有任何内容，该行将重置字数统计（这就是为什么在第三个文本区域上书写时，字数仅对跨度“输出”）。 请尝试以下代码：

$(function() {

    var countWords = function () {
        var sum = 0;
        $(\"textarea\").each(function() {

            var words = $(this).val().split(\' \');
            $.each(words,function(i,v) {
                if ($.trim(v) !== \'\') {sum++;}
            });

        });

        $(\'#maxwords span\').text(sum);
    };

    // this binds our counting function to the textareas
    $(\"textarea\").bind(\'keyup click blur focus change paste\',countWords);

    // let\'s run this on document ready
    countWords();

});

这是一个

O(n^2)

算法（或更确切地说是

O(nm)

？），但是它可以正确检查重复的空格。尝试与正则表达式匹配以降低复杂度可能会更好。 这在这里在我的jsFiddle上工作。 编辑 更新了解决方案以在准备好文档时也运行计数功能。另外，您也可以将

ready

处理程序添加到

textarea

绑定（即

$(\"textarea\").bind(\'ready keyup click blur focus change paste\',countWords)

）中，而不是调用函数本身，这也应该冒充到文档就绪的处理程序中，但我只是喜欢将其写出来，这样明确。     ,你为什么有这条线？尝试将其删除。

if($(this).val() === \'\') { sum = 0; }

如果遇到空字段，这将导致您将总和重置为零，直到填充字段之后的所有字段都包含内容为止，您将一直将其重置为零。     ,

$(\"#form textarea\").live(\'KeyUp\',function(){
var sum = 0;
$(\"#form textarea\").each(function(){
   sum+= $(this).val().split(\' \').length;

});
//put sum in your span
});

如果您希望它是实时的，则必须处理keyup事件。