Count # of non-blank lines in a text file with Javascript?

Question

Hi I'm trying to count all the non-blank lines in a text file using JS or Jquery.

Right now I'm using a 2 step approach... but it's still counting the blanks lines.

I'm pulling the text file from the input box and displaying the file info above a text area and the contents in the text area.

Evertyhing seems to work great except I can't get the linecount.js to skip the blank line... is this even possible in jQuery?

JS to load the text file into the textarea:

   var reader; //GLOBAL File Reader object for demo purpose only

/**
 * Check for the various File API support.
 */
function checkFileAPI() {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        reader = new FileReader();
        return true; 
    } else {
        alert('The File APIs are not fully supported by your browser. Fallback required.');
        return false;
    }
}

/**
 * read text input
 */
function readText(filePath) {
    var output = ""; //placeholder for text output
    if(filePath.files && filePath.files[0]) {           
        reader.onload = function (e) {
            output = e.target.result;
            displayContents(output);
        };//end onload()
        reader.readAsText(filePath.files[0]);
    }//end if html5 filelist support
    else if(ActiveXObject && filePath) { //fallback to IE 6-8 support via ActiveX
        try {
            reader = new ActiveXObject("Scripting.FileSystemObject");
            var file = reader.OpenTextFile(filePath, 1); //ActiveX File Object
            output = file.ReadAll(); //text contents of file
            file.Close(); //close file "input stream"
            displayContents(output);
        } catch (e) {
            if (e.number == -2146827859) {
                alert('Unable to access local files due to browser security settings. ' + 
                 'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' + 
                 'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"'); 
            }
        }       
    }
    else { //this is where you could fallback to Java Applet, Flash or similar
        return false;
    }       
    return true;
}   

/**
 * display content using a basic HTML replacement
 */
function displayContents(txt) {
    var el = document.getElementById('countMe'); 
    el.innerHTML = txt; 

}  

Fiddle for the line count:

$(document).ready(function(){

var lines = 5;
var linesUsed = $('#linesUsed');

$('#countMe').keydown(function(e) {

    newLines = $(this).val().split("\n").length;
    linesUsed.text(newLines);

    if(e.keyCode == 13 && newLines >= lines) {
        linesUsed.css('color', 'red');
        return false;
    }
    else {
        linesUsed.css('color', '');
    }
});

});

The input code and text area:

    <input type="file" id="files" name="files[]" onchange='readText(this)' />
   <textarea name="countMe" cols="58" rows="18" id="ta"></textarea>
   <div class="theCount">Lines used: <span id="linesUsed">0</span><div>

Answer 1

You are counting the lines but not checking if there is anything in each line. Keep the array of lines in a variable and loop through the lines to check if there is anyhing in them:

newLines = 0;
var lines = $(this).val().split("\n");
for (var i = 0; i < lines.length; i++) {
  if (lines[i].length > 0) newLines++;
}
linesUsed.text(newLines);