如何用JavaScript合并多个textarea数据并按行对应排序组合

要实现多个textarea内容按行对应合并，你需要先将每个文本框的内容按行拆分，再按位置依次拼接对应行的内容。以下是修改后的完整代码：

HTML（仅调整示例内容方便测试，结构无需改动） #

<form name="releaseNotes">
<br>
<textarea name="who" cols="40" rows="5">1
2
3
</textarea>
  <br>
<textarea name="problem" cols="40" rows="5">text1
text2
text3
</textarea>
  <br>
<textarea name="specs" cols="40" rows="5">red1
red2
red3
</textarea>
  <br>


<br>
<input type="button" align="middle" onclick="doConcat()" value="Generate" style="height: 50px; width: 120px" />
<br>
  
<textarea name="releaseNoteCombined" cols="40" rows="25">
</textarea><br>
</form>

CSS（无需改动） #

body { 
  background: black;
}

修改后的JavaScript逻辑 #

function doConcat() {
  // 获取三个文本框内容，按行分割并清洗空行、首尾空白
  const whoLines = document.releaseNotes.who.value.split('\n').map(line => line.trim()).filter(line => line);
  const problemLines = document.releaseNotes.problem.value.split('\n').map(line => line.trim()).filter(line => line);
  const specsLines = document.releaseNotes.specs.value.split('\n').map(line => line.trim()).filter(line => line);
  
  // 取最长的行数作为循环上限，确保所有内容都被处理
  const maxLines = Math.max(whoLines.length, problemLines.length, specsLines.length);
  let result = '';
  
  // 遍历每一行，依次拼接对应位置的内容
  for (let i = 0; i < maxLines; i++) {
    if (whoLines[i]) result += whoLines[i] + '\n';
    if (problemLines[i]) result += problemLines[i] + '\n';
    if (specsLines[i]) result += specsLines[i] + '\n';
  }
  
  // 去除末尾多余换行，赋值到结果文本框
  document.releaseNotes.releaseNoteCombined.value = result.trimEnd();
}

关键逻辑说明 #

1. 行拆分与清洗：通过split('\n')将文本内容拆分为行数组，用trim()清除每行首尾空白，filter()过滤空行，避免无效内容干扰输出。
2. 对应行拼接：以最长的行数组长度为循环次数，确保所有行都被覆盖；循环中依次取出对应位置的行内容，每个内容单独占一行。
3. 结果优化：用trimEnd()去除结果末尾多余的换行符，让输出格式更整洁。

内容的提问来源于stack exchange，提问作者user22215102