<textarea id="text">
  
</textarea>
<div id="result">
            Words: <span id="count">0</span><br/>
            Space: <span id="spaceCount">0</span><br/>
            Newline: <span id="lineCount">0</span><br/>
            test: <span id="test">0</span><br/>
            total: <span id="total">0</span><br/>

            
            </div>

#text{
  height: 200px;
  width: 300px;
}

counter = function() {
    var value = $('#text').val();

    if (value.length == 0) {
        $('#count').html(0);
        $('#spaceCount').html(0);
        $('#test').html(0);
        return;
    }


		var regex = /\s+/gi;
    var count = value.length;
    var spaceCount = value.split(" ").length -1;
    var lineCount = value.split('\n').length - 1 ;
    var test = value.replace(regex, '').length;
   	var length = 10;
  $("#text").removeAttr("maxlength");
     if(test >= length){
     var total = spaceCount + length + lineCount;
				 $("#text").attr('maxlength',total);
     }
    
     $('#count').html(count);
     $('#spaceCount').html(spaceCount);
     $('#lineCount').html(lineCount);
     $('#test').html(test);
     $('#total').html(total);
     

   
};

$(document).ready(function() {
    $('#count').click(counter);
    $('#text').change(counter);
    $('#text').keydown(counter);
    $('#text').keypress(counter);
    $('#text').keyup(counter);
    $('#text').blur(counter);
    $('#text').focus(counter);
});