JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="text"> lorem impsum .</textarea>
<div id="lblCounts"></div>

CSS

#text {
    width: 100%;
    height: 40vh;

}

JavaScript

refreshCounts = function(value) {
    value = value || '';
    
    var wordCount=0,totalChars = 0,charCount=0,charCountNoSpace = 0;setencesCount=0;
    if (value.length != 0) {
    
        var regex = /\s+/gi;
        wordCount = value.trim().replace(regex, ' ').split(' ').length;
        totalChars = value.length;
        charCount = value.trim().length;
        charCountNoSpace = value.replace(regex, '').length;
        setencesCount = value.split('.').length-1;
    }
    $('#lblCounts').html('');
    $('#lblCounts').append('Words: ' + wordCount);
    $('#lblCounts').append('<br \>Total Chars: ' + totalChars);
    $('#lblCounts').append('<br \>Total Chars exclude trails: ' + charCount);
    $('#lblCounts').append('<br \>Total Chars exclude blank spaces: ' + charCountNoSpace);
    $('#lblCounts').append('<br \>Setences: ' + setencesCount);
}


refreshCounts($('#text').val()); //draw in load document

/*capture functions
change, keypress,keyup,blur,focus
*/
   $('#text').change(function(){
        refreshCounts($(this).val())
    });

    $('#text').keyup(function(){
        refreshCounts($(this).val())
    });