如何用JavaScript将textarea最后三行分别存入三个变量？

云原生阿岚

2026-5-19

实现textarea粘贴文本后提取最后三行到变量

没问题，这需求很 straightforward！咱们直接上解决方案，我会把细节说清楚，方便你理解和调整：

首先，先确认你的HTML结构已经是这样的（应该和你描述的一致）：

<textarea id="txt"></textarea>
<button onclick="clicked()">提取最后三行</button>

接下来是核心的clicked函数实现，我会逐行解释关键逻辑：

function clicked() {
  // 1. 获取目标textarea元素
  const textarea = document.getElementById('txt');
  
  // 2. 处理文本内容：统一换行符，分割成行数组
  // 替换Windows风格的\r\n为统一的\n，避免跨系统换行问题
  const allLines = textarea.value.replace(/\r\n/g, '\n').split('\n');
  
  // 可选步骤：过滤掉空行（如果需要保留空行，直接跳过这行用allLines就行）
  const validLines = allLines.filter(line => line.trim() !== '');
  
  // 3. 提取最后三行，做兜底处理避免行数不足时出现undefined
  const lastLine = validLines[validLines.length - 1] || '';
  const secondLastLine = validLines[validLines.length - 2] || '';
  const thirdLastLine = validLines[validLines.length - 3] || '';
  
  // 这里可以根据你的需求做后续操作，比如打印到控制台或者展示到页面
  console.log("最后一行：", lastLine);
  console.log("倒数第二行：", secondLastLine);
  console.log("倒数第三行：", thirdLastLine);
}

关键细节说明：

换行符兼容：不同操作系统的换行符不一样（Windows是\r\n，Mac/Linux是\n），先用replace统一成\n，再分割成数组，避免出现空的行元素。
空行处理：如果你希望保留粘贴文本中的空白行（比如用户粘贴了空行也算一行），直接去掉filter那一行，用allLines代替validLines即可。
兜底逻辑：当用户粘贴的文本不足3行时，用|| ''让变量默认是空字符串，避免后续操作出现undefined的报错。