如何使用 jQuery 实时计算单词？

在本文中，我们将学习如何使用 jQuery 实时计算单词。我们有一个输入字段，当我们输入时，我们会实时获取输入中的单词数。

方法：首先，我们选择输入字段并将其值存储到变量中。当释放键盘键时，我们调用一个名为wordCount()的函数来计算输入字段中的单词数。为了计算输入字段中的单词数，我们使用 jQuery split() 方法按空格分割值，然后计算单词数。

代码片段：以下是方法wordCount() 的实现。

function wordCount( field ) {
    var number = 0;
    
    // Split the value of input by
    // space to count the words
    var matches = $(field).val().split(" ");
        
    // Count number of words
    number = matches.filter(function (word) {
        return word.length > 0;
    }).length;
        
    // final number of words
    $("#final").val(number);
}

HTML 代码：以下是上述方法的完整实现。

HTML

  

    
    
  
    
        body {
            color: green;
            font-size: 30px;
        }
  
        input {
            font-size: 30px;
            color: green;
        }
    

  

    GeeksforGeeks
    
    
  
    
        function wordCount(field) {
            var number = 0;
  
            // Split the value of input by
            // space to count the words
            var matches = $(field).val().split(" ");
  
            // Count number of words
            number = matches.filter(function (word) {
                return word.length > 0;
            }).length;
  
            // Final number of words
            $("#final").val(number);
        }
  
        $(function () {
            $("input[type='text']:not(:disabled)")
            .each(function () {
                var input = "#" + this.id;
  
                // Count words when keyboard
                // key is released
                $(this).keyup(function () {
                    wordCount(input);
                });
            });
        });
    

  

输出：