Как я могу запретить запятой разделять каждое предложение, когда я использую функцию .replace ()?

Question

Это мой код, который удаляет все комментарии из файла javascript, однако каждая начальная строка результата начинается с запятой. Это могло быть потому, что я использую \n для представления новой строки в замене. Это могло быть проблемой, но я не знаю другого способа представить новую строку в Javascript. Пожалуйста, помогите!

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(/(\r\n|\n|\r)/gm, "\n");
    var str = documentNew;
    var lines = str.split('\n');

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

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

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

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

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Upload A Javascript Document</h3>
<input type="file" id="myFile">
<textarea id="answerDocument1"></textarea>
<br><br>
<hr>
<br><br>
<h3>Paste Code</h3>
<textarea id="doc"></textarea>
<h3>Copy Formatted Code</h3>
<textarea id="answerDocument2" style="resize: none;" readonly></textarea>

Answer 1

Проблема в том, где вы вызываете String(filterred) в этой части кода:

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

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

Обратите внимание, что ваша переменная filterred является массивом. Когда вы вызываете String() в массиве, он дает вам элементы массива, соединенные запятыми между ними, например,

String([ 'a', 'b', 'c' ])

даст результат:

"a,b,c"

Вместо этого используйте метод join() в массиве и явно указать ему пустой разделитель строк:

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

Обратите пристальное внимание на предложение @Andreas о некоторой отладке. Одна вещь, которая может помочь здесь, - это разбить цепочку вызовов, подобную приведенной выше, на отдельные операторы:

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

Теперь вы можете поместить оператор debugger; или два, запустить с открытыми инструментами разработчика, и он остановится в отладчике, чтобы вы могли посмотреть свои переменные:

debugger;
filterred = String(filterred);
debugger;  // Here you will notice that 'filterred' has the commas in it
filterred = filterred.replace(/;/g, "; \n");

console.log(); тоже может быть прекрасным способом отладки, но debugger; позволяет вам больше взаимодействовать с вашим кодом и данными.

Также у вас есть пробел после точки с запятой в последней строке. Вместо этого сделайте ";\n", чтобы избежать конечных пробелов.

И BTW «отфильтрованный» содержит только один «r». : -)

Answer 2

Это полный рабочий код!

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(/(\r\n|\n|\r)/gm, "\n");
    var str = documentNew;
    var lines = str.split('\n');

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

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

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Upload A Javascript Document</h3>
<input type="file" id="myFile">
<textarea id="answerDocument1"></textarea>
<br><br>
<hr>
<br><br>
<h3>Paste Code</h3>
<textarea id="doc"></textarea>
<h3>Copy Formatted Code</h3>
<textarea id="answerDocument2" style="resize: none;" readonly></textarea>