How to calculate the number of words in a string using JQuery?

In order to calculate the number of words in a string, we can Use the JQuery split() method along with or without trim() method.
.split() method simply split a string into an array of substrings by a specified character and .trim() method to remove the leading and trailing white spaces.

Syntax:

string.split(separator, limit)
    Approach:



  • Get the string from the HTML element.
  • Split the string into substring on the basis of whitespaces.
  • Count the number of substrings.

Example 1: Along with trim() method, removing starting and ending spaces from the string

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>How to calculate the number 
      of words in a string using Javascript?</title>
  </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;"
        GeeksForGeeks 
    </h1>
    <h3>How to calculate the number of words
      in a string using Javascript?</h3>
    <textarea> Geeks For GEEKS </textarea>
    <br>
    <button type="button">Click</button>
    <script type="text/javascript">
        $(document).ready(function() {
            $("button").click(function() {
                // reduce the whitespace from both sides of a string. 
                var geeks1 = $.trim($("textarea").val());
                //split a string into an array of substrings
                var geek = geeks1.split(" ")
                    // count number of elements
                alert(geek.length);
            });
        });
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before Click on button:
  • After Click on button:

Example 2: Without trim() method

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Calculate the number
      of Words in a String</title>
  
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;"
        GeeksForGeeks 
    </h1>
    <h3>How to calculate the number of
      words in a string using Javascript?</h3>
    <p id="geeks1"></p>
    <br>
    <button onclick="myFunction()">Click</button>
    <p id="geeks"></p>
  
    <script>
        var str = "Geeks For Geeks";
        document.getElementById("geeks1").innerHTML = str;
  
        function myFunction() {
            var res = str.split(" ");
            document.getElementById(
              "geeks").innerHTML = res.length;
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before Click on button:
  • After Click on button:


My Personal Notes arrow_drop_up

Small things always make you to think big

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.