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。否则，您可能最终会尝试将数据添加到不存在的文本区域。

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

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>