How to input a file, and then filter it and output the result into a textarea?

Question

I have the following code that you can upload a Javascript file and it removes all comments from the document. This works perfectly. However below that I have two textareas. One is where the user pastes their code, and the same function to remove all comments is run on that code and the updated code is pasted in the other textarea. However the result comes out as undefined. What is wrong with my code. Please help me!

function fileUploaded() {
  var myUploadedFile = document.getElementById("myFile").files[0];
  var reader = new FileReader();
  reader.readAsText(myUploadedFile, "UTF-8");
  reader.onload = function(evt) {
    var documentNew = evt.target.result.replace(/(
|
|
)/gm, "
");

    document.getElementById("myFile").addEventListener("change", fileUploaded, false);

    var str = documentNew;
    var lines = str.split('
');

    var filterred = lines.filter(function(line) {
      return line.indexOf('//') != 0;
    });

    filterred = String(filterred).replace(/;/g, "; 
");

    $("#answerDocument1").html(filterred);
  };
};
document.getElementById("myFile").addEventListener("change", fileUploaded, false);
$("#doc").keyup(function(evt) {
  var doc = $("doc").html();
  var documentNew = String(doc).replace(/(
|
|
)/gm, "
");

  var str = documentNew;
  var lines = str.split('
');

  var filterred = lines.filter(function(line) {
    return line.indexOf('//') != 0;
  });

  filterred = String(filterred).replace(/;/g, "; 
");

  $("#answerDocument2").html(documentNew);
});

textarea {

  width: 100px;
  height: 100px;

}


Upload A Javascript Document

user_13351476 · Answer

I have used...

filterred = filterred.join("").replace(/;/g, "; ");

Instead of...

filterred = String(filterred).replace(/;/g, "; ");

Because filterred is an array, and not a string, and if you convert it into a string it comes out joined by commas.

I have also used $("#doc").val(); instead of $("doc").html();, because it is the value of the that I am getting. That makes the undefined message go away.

function fileUploaded() {
  var myUploadedFile = document.getElementById("myFile").files[0];
  var reader = new FileReader();
  reader.readAsText(myUploadedFile, "UTF-8");
  reader.onload = function(evt) {
    var documentNew = evt.target.result.replace(/(
|
|
)/gm, "
");
    var str = documentNew;
    var lines = str.split('
');

    var filterred = lines.filter(function(line) {
      return line.indexOf('//') != 0;
    });

    
    filterred = filterred.join("").replace(/;/g, "; 
");
    $("#answerDocument1").html(filterred);
  };
};
document.getElementById("myFile").addEventListener("change", fileUploaded, false);
$("#doc").keyup(function(evt) {
  var doc = $("#doc").val();
  var documentNew = String(doc).replace(/(
|
|
)/gm, "
");
  var str = documentNew;
  var lines = str.split('
');

  var filterred = lines.filter(function(line) {
    return line.indexOf('//') != 0;
  });

  filterred = filterred.join("").replace(/;/g, "; 
");
  $("#answerDocument2").html(filterred);
});

textarea {
  width: 150px;
  height: 150px;
}


Upload A Javascript Document









Paste Code

Copy Formatted Code

How to input a file, and then filter it and output the result into a textarea?

1 Answers