Javascript - 将分隔文本拆分为列

Question

我正在尝试将分隔文本拆分为多个列。到目前为止，我设法动态添加textareas，但是我无法将数组拆分两次（“\ 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循环中创建textareas。然后使用另一个循环来解析text。否则，您可能最终会尝试将数据添加到不存在的textarea。

在另一个循环中，您需要一个嵌套循环来遍历您的分割字符串。

Your updated 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>