如何使用JavaScript获取HTML文本的最后一行？

这里有几种不同场景下的解决方案，你可以根据实际情况来选择：

场景1：文本本身包含换行符（\n），且已渲染到DOM中 #

如果你的<p>元素已经在页面上，而且文本内容里有明确的换行符，直接拆分文本内容就行：

// 先获取目标p元素
const targetPara = document.querySelector('p');
// 把文本按换行符拆分成数组
const allLines = targetPara.textContent.split('\n');
// 过滤掉空行（避免最后一行是空白的情况）
const validLines = allLines.filter(line => line.trim() !== '');
// 取最后一行
const lastLine = validLines[validLines.length - 1];
console.log(lastLine);

场景2：只有HTML字符串，还没渲染到页面 #

如果你手里只有原始的HTML字符串，先把它解析成DOM元素再处理：

const htmlString = '<p>asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass asdfas ass</p>';
// 创建临时div来解析HTML
const tempContainer = document.createElement('div');
tempContainer.innerHTML = htmlString;
const targetPara = tempContainer.querySelector('p');

// 接下来和场景1的步骤一致
const allLines = targetPara.textContent.split('\n');
const validLines = allLines.filter(line => line.trim() !== '');
const lastLine = validLines[validLines.length - 1];
console.log(lastLine);

场景3：文本是因为容器宽度自动换行（无明确换行符） #

如果文本本身没有换行符，是页面渲染时因为容器宽度自动折行的，那得通过获取文本行的布局信息来截取：

const targetPara = document.querySelector('p');
const textNode = targetPara.firstChild;
// 获取文本每一行的矩形区域
const lineRects = textNode.getClientRects();

if (lineRects.length === 0) {
  console.log('该元素没有文本内容');
  return;
}

// 定位最后一行的范围
const lastLineRect = lineRects[lineRects.length - 1];
let startOffset = 0;
// 找到最后一行的起始偏移量
for (let i = 0; i < lineRects.length; i++) {
  if (lineRects[i].top === lastLineRect.top) {
    startOffset = textNode.getOffsetAtPoint(lineRects[i].left, lineRects[i].top);
    break;
  }
}
// 找到最后一行的结束偏移量
const endOffset = textNode.getOffsetAtPoint(lastLineRect.right - 1, lastLineRect.top);
// 截取最后一行文本
const lastLine = textNode.textContent.substring(startOffset, endOffset).trim();
console.log(lastLine);

需要注意的是，第三种方法依赖于页面的布局，所以得确保元素已经渲染完成（比如放在DOMContentLoaded事件里执行），否则可能获取不到正确的矩形信息。

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