如何提取textarea的每行内容为数组

嘿，我完全懂你的需求——你要的不是按textarea里实际输入的换行符(\n)拆分，而是要拿到视觉上显示的每行内容，对吧？毕竟你的textarea里的Markdown图片语法因为宽度限制被自动折成了两行，但实际value里是一整行的，直接用split("\n")根本得不到想要的结果。

这里给你一个可行的方案，核心思路是用一个隐藏的div模拟textarea的渲染样式，然后通过计算高度来判断内容什么时候会自动换行：

实现步骤 #

• 先创建一个临时div，完全复刻textarea的样式（宽度、字体、行高这些细节都要匹配），确保它的换行逻辑和目标textarea完全一致。
• 把textarea的内容按实际输入的换行先拆分成段落，逐个进行处理。
• 对每个段落，逐字符添加到临时div里，一旦div的高度超过单行的高度，就说明这里发生了自动换行，把当前内容作为一行存入结果数组，再从断点继续处理剩下的内容。
• 最后记得清理临时div，避免污染页面DOM。

完整代码 #

JavaScript 部分

function splitTextarea() {
  const textarea = document.getElementById("myTextarea");
  const text = textarea.value;

  // 先按实际输入的换行拆分段落
  const lines = text.split("\n");
  const renderedRows = [];
  
  // 创建临时元素模拟textarea渲染
  const tempElement = document.createElement("div");
  tempElement.style.position = "absolute";
  tempElement.style.visibility = "hidden";
  tempElement.style.overflowWrap = "break-word";
  tempElement.style.whiteSpace = "pre-wrap"; // 保留空格和换行格式
  tempElement.style.width = `${textarea.clientWidth}px`; // 匹配textarea宽度
  tempElement.style.fontFamily = getComputedStyle(textarea).fontFamily; // 匹配字体
  tempElement.style.fontSize = getComputedStyle(textarea).fontSize; // 匹配字号
  tempElement.style.lineHeight = getComputedStyle(textarea).lineHeight; // 匹配行高
  document.body.appendChild(tempElement);

  lines.forEach(line => {
    if (line === '') {
      // 处理空行
      renderedRows.push('');
    } else {
      let start = 0;
      while (start < line.length) {
        let end = start;
        while (end < line.length) {
          const currentText = line.slice(start, end);
          tempElement.textContent = currentText;
          const height = parseInt(window.getComputedStyle(tempElement).height, 10);
          
          // 当高度超过单行高度时，说明触发了自动换行
          if (height > parseInt(getComputedStyle(textarea).lineHeight, 10)) {
            end--;
            break;
          }
          end++;
        }
        renderedRows.push(line.slice(start, end));
        start = end;
      }
    }
  });

  // 清理临时元素
  document.body.removeChild(tempElement);

  console.log("视觉行数组:", renderedRows);
  return renderedRows;
}

HTML 部分

<textarea id="myTextarea" style="width: 700px; height: 300px; overflow-y: scroll;">
![Screen Shot 2025-02-21 at 17.32.49.png](http://localhost:9001/article/680x_4a9d1136-fafb-40dc-8a47-72ca0b24bf46.png)
</textarea>
<div id="textForm"></div>
<button onclick="splitTextarea()">提取视觉行内容</button>

效果说明 #

点击按钮后，就能得到你预期的数组：

["![Screen Shot 2025-02-21 at 17.32.49.png]", 
 "(http://localhost:9001/article/680x_4a9d1136-fafb-40dc-8a47-72ca0b24bf46.png)"]

备注：内容来源于stack exchange，提问作者binh truong