Tukukkk

I've two working ways to do so, but which one should I use?

Common part: var textarea = document.getElementById("textarea");

First way:

function updateStatusBar() {

    var text = textarea.value;

    statusBar.value = "Words: " + (text ? text.match(/bS+b/g).length : "0") +

      "  Characters: " + text.replace(/s/g, "").length +

      " / " + text.replace(/n/g, "").length;

}

and second way:

function updateStatusBar() {

    var text = textarea.value;

    statusBar.value = "Words: " + (text.split(/bS+b/).length - 1) +

      "  Characters: " + text.replace(/s/g, "").length +

      " / " + text.replace(/n/g, "").length;

}

Please review the Words: counting code. Which one should I use?

To simplify, you are asking which of these ways is better to count the number of words in text:

text ? text.match(/bS+b/g).length : "0"

// ... versus ...

text.split(/bS+b/).length - 1

First of all, the first expression will crash for a non-empty text without words, for example :!@#$. Because a non-empty text is "true", but the .match will return null, so you'll get a null pointer exception in .length.

Second of all, a more intuitive regular expression for words is this:

text.match(/ww+/g).length

Since by its definition, w+ is a word. I added an extra w to exclude single letters, as that seems closer to what you want.

Your main question concerns the angle that if you use match you have to check for null, but if you use split you don't have to. So after corrections, we're comparing these two:

(words = text.match(/ww+/g)) == null ? 0 : words.length

// ... versus ...

text.split(/ww+/).length - 1

And since the second one is much shorter, I recommend that one. Even though matching seems more intuitive to me than splitting to solve this problem. Short is nice. And it seems you don't need the words list for anything, so there's no point whatsoever to create it.

A few comments on this...

What is a character? In your code, you are only counting non-spaces as characters. But, if the user enters a a that counts as 10 characters to me.....

From my perspective, Characters can just be text.length.

Still your definition appears to be 'non-space characters'. Using that definition....

Now, about the regex. You describe 2 ways to count words, and one way to count non-space characters, and then, for some odd reason, you count newlines as well.

So, if I were to suggest that the best way to do it was with just one big, and few small regex... ? The big regex is the most complicated to run because it needs to do more complicated matching on a larger value. By stripping the value sooner, you can make it faster.

Note, you do not need the b word boundary markers when dealing with either s+ or S+.

//Function declaration, will be hoisted for 'addEventListener'

//Most of the work is done to have this work for multiple text area's

function updateStatus(){



  var text = this.value,

      // replace all words with an x

      xWords = text.replace(/S+/g, "x"),

      //Replace those x's

      noWords = xWords.replace(/x/g, ""),

      //Get rid of newlines from just the spaces.

      noNewLines = noWords.replace(/n/g, "");

  //You could consider a template function here..

  statusBar.textContent = "Length: " + text.length +

                          " Words: " + (xWords.length - noWords.length) +

                          " Characters: " + (text.length - noWords.length) +

                          " / " + (noWords.length - noNewLines.length);  

}

The above creates successively smaller string values, and compares the difference in length to compute the result....

Sometimes Plan C is the better option.

With the help of Konijn we/I have put together this jsfiddle which shows it in operation.

1. Replace tab and newline and sentence ending characters, e.g. ., with space character.


2. Split the resulting string on space character.


3. 
   .trim() item and .push to new array if it is not an empty string.

The .length of that new array provides your word count. See it in action here/below (test by adding several spaces between words and by using several line breaks):

var txt = document.getElementById("txt");

var resultSpan = document.getElementById("res");



txt.addEventListener('keyup', count);



function count(){

  var resultArray = ;

  //replace all tab, newline, periods, exclamations, question marks w space

  var str = this.value.replace(/[tnr.?!]/gm,' ');

  //split string by space character

  var wordArray = str.split(" ");

    //for each array item, remove all space characters

  for (var i = 0; i < wordArray.length; i++) {

    var item = wordArray[i].trim();

    //if item contains characters push it into a new array

    if(item.length > 0){

      resultArray.push(item);

    }

  }

  resultSpan.innerText = resultArray.length;

}

<textarea id="txt" rows="8" cols="40"></textarea>

<p><span id="res">0</span> words.</p>