Javascript-将带分隔符的文本拆分为列

我正在尝试将带分隔符的文本拆分为多列。到目前为止，我成功地动态添加了textareas，但在将数组拆分两次（“\n”和分隔符）并获取列时遇到了问题。下面是我正在尝试做的一个图像。我感谢你的帮助

HTML

Total columns#分隔符
分裂




A1-B1-C1-D1
A2-B2-C2-D2
A3-B3-C3-D3
A4-B4-C4-D4
A5-B5-C5-D5
A6-B6-C6-D6

JS

var cols=$（'#colNum'）.val（）；
var delimiter=$（'#delimiter'）.val（）；
var text=$（'#input'）.val（）.trim（）.split（'\n'）；
var i；
对于（i=0；i

---

您需要在第一个for循环中创建文本区域。然后使用另一个循环来解析

文本

。否则，您可能会尝试将数据添加到不存在的textarea

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

$（“#拆分文本”）。单击（函数（）{
var cols=$（'#colNum'）.val（）；
var delimiter=$（'#delimiter'）.val（）；
var text=$（'#input'）.val（）.trim（）.split（'\n'）；
$（'.tb_tr'）.html（''）；
varⅠ，j；
//为每列创建textarea的第一个循环：
对于（i=0；i
.tb\u表{
宽度：100%；
显示：表格；
}
.tb_tr{
显示：表格行
}
.tb_细胞{
显示：表格单元格；
高度：200px
}
文本区{
宽度：100%；
身高：100%；
最小高度：120px
}

总列数#分隔符
分裂




A1-B1-C1-D1
A2-B2-C2-D2
A3-B3-C3-D3
A4-B4-C4-D4
A5-B5-C5-D5
A6-B6-C6-D6
您需要在第一个for循环中创建文本区域。然后使用另一个循环来解析
文本
。否则，您可能会尝试将数据添加到不存在的textarea

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



$（“#拆分文本”）。单击（函数（）{
var cols=$（'#colNum'）.val（）；
var delimiter=$（'#delimiter'）.val（）；
var text=$（'#input'）.val（）.trim（）.split（'\n'）；
$（'.tb_tr'）.html（''）；
varⅠ，j；
//为每列创建textarea的第一个循环：
对于（i=0；i
.tb\u表{
宽度：100%；
显示：表格；
}
.tb_tr{
显示：表格行
}
.tb_细胞{
显示：表格单元格；
高度：200px
}
文本区{
宽度：100%；
身高：100%；
最小高度：120px
}

总列数#分隔符
分裂




A1-B1-C1-D1
A2-B2-C2-D2
A3-B3-C3-D3
A4-B4-C4-D4
A5-B5-C5-D5
A6-B6-C6-D6
感谢您添加详细的评论和解释。非常感谢。感谢您添加详细的评论和解释。我很感激。
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>

  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);
  }