Javascript - разделить текст с разделителями на столбцы

Question

Я пытаюсь разбить текст с разделителями на несколько столбцов. До сих пор мне удавалось динамически добавлять текстовые области, но у меня возникают проблемы с разделением массива дважды ("\ n" и разделителем) и получением столбцов. Ниже изображение того, что я пытаюсь сделать. Я ценю помощь.

HTML

Total columns #<input id="colNum" value="4"> Delimiter <input id="delimiter" value="—">
<button id="splitText">Split</button>
<br>
<br>
<textarea id="input">
A1—B1—C1—D1
A2—B2—C2—D2
A3—B3—C3—D3
A4—B4—C4—D4
A5—B5—C5—D5
A6—B6—C6—D6
</textarea>

<div class="tb_table"><div class="tb_tr"></div></div>

JS

  var cols = $('#colNum').val();
  var delimiter = $('#delimiter').val();
  var text = $('#input').val().trim().split('\n');

  var i;
  for (i = 0; i < cols; i++) {
    $('.tb_tr').append('<div class="tb_cell"><textarea id="tb_col_' + (i + 1) + '"/></div>');

    col_arr = text[i].split(delimiter);

    temp = "#tb_col_" + (i + 1);
    $(temp).val(col_arr);
  }

JSFiddle

Answer 1

Вы должны создать свои текстовые области в первом цикле for. А затем используйте другой цикл для анализа text. В противном случае вы можете попытаться добавить данные в несуществующую текстовую область.

И в этом другом цикле вам нужен вложенный цикл для циклического прохождения вашей разделенной строки.

Ваш обновленный JSFiddle

$("#splitText").click(function() {
    var cols = $('#colNum').val();
    var delimiter = $('#delimiter').val();
    var text = $('#input').val().trim().split('\n');

    $('.tb_tr').html('');
    
    var i, j;
    
    
    // first loop to create a textarea for each column :
    for (i = 0; i < cols; i++) {
        $('.tb_tr').append('<div class="tb_cell"><textarea id="tb_col_' + (i + 1) + '"/></div>');
    }

    // second loop to loop through data read in the text array 
    for (i = 0; i < text.length; i++) {
        col_arr = text[i].split(delimiter);

        // nested loop to loop through the splitted string 
        for (j = 0; j < col_arr.length; j++) {
            // using the right element name to add the text in the right textarea : 
            temp = "#tb_col_" + (j + 1);
            $(temp).val($(temp).val() + col_arr[j] + "\n");
        }
    }
});

.tb_table {
  width: 100%;
  display: table;
}

.tb_tr {
  display: table-row
}

.tb_cell {
  display: table-cell;
  height: 200px
}

textarea {
  width: 100%;
  height: 100%;
  min-height: 120px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Total columns #<input id="colNum" value="4"> Delimiter <input id="delimiter" value="—">
<button id="splitText">Split</button>
<br>
<br>
<textarea id="input">A1—B1—C1—D1
A2—B2—C2—D2
A3—B3—C3—D3
A4—B4—C4—D4
A5—B5—C5—D5
A6—B6—C6—D6</textarea>


<div class="tb_table">
  <div class="tb_tr">

  </div>
</div>