如何获得Textarea

Question

如果Textarea显示行1

![Screen Shot 2025-02-21 at 17.32.49.png]

和第2行是

(http://localhost:9001/article/680x_4a9d1136-fafb-40dc-8a47-72ca0b24bf46.png)

，我如何通过行内容数组获得Textarea的内容。这意味着我希望我能像下面的数组一样

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

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

  // Step 1: Split by hard line breaks (`\n`)
  const lines = text.split("\n");
  const renderedRows = []
  // Step 2: For each paragraph, split into rows based on textarea width
  // const rowsArray = [];
  const tempElement = document.createElement("div");
  tempElement.style.position = "absolute";
  // tempElement.style.visibility = "hidden";
  tempElement.style.overflowWrap = "break-word";
  tempElement.style.whiteSpace = "pre-wrap"; // Preserve spaces and line breaks
  tempElement.style.width = `${textarea.clientWidth}px`; // Match textarea width
  tempElement.style.fontFamily = getComputedStyle(textarea).fontFamily; // Match font
  tempElement.style.fontSize = getComputedStyle(textarea).fontSize; // Match font size
  tempElement.style.lineHeight = getComputedStyle(textarea).lineHeight; // Match line height
  // tempElement.style.padding = getComputedStyle(textarea).padding; // Match padding
  // tempElement.style.boxSizing = "border-box"; // Match box sizing
  document.body.appendChild(tempElement);

  lines.forEach(line => {
    if (line === '') {
      // Handle blank lines
      renderedRows.push('');
    } else {
      let start = 0;
      while (start < line.length) {
        let end = start;
        while (end < line.length) {
          const text = line.slice(start, end);
          tempElement.textContent = line.slice(start, end);
          const computedStyle = window.getComputedStyle(tempElement);
          const height = computedStyle.height;
          const heightInt = parseInt(height, 10);
          // if (text === "2全国各地から厳選された有名焼き芋店やおいもスイーツの専門店が集結し、素材にこだわった極上の焼き芋や多彩な") {
          //   console.log('heightInt', heightInt)
          // }
          console.log(text, heightInt)
          if (heightInt > 19) {
            // console.log('end,', end)
            end = end - 1
            break;
          }
          end++;
        }
        console.log("line", line.slice(start, end))
        renderedRows.push(line.slice(start, end));

        start = end;
      }
    }
  });

  // Clean up
  // document.body.removeChild(tempElement);

  console.log("Rows Array:", renderedRows);
  return renderedRows;
}

<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()">Split Textarea</button>

Answer 1

抓住文字并被

\n

：

拆分：

function splitTextarea() {
  const text = document.getElementById("myTextarea").value;
  const lines = text.split("\n"); // Easy way to get each line
  console.log(lines);
  return lines;
}

除非您要处理文本方面的word包装，否则不需要所有这些额外的dom东西。如果是这样，您需要使用canvas

或正确测量文本宽度的更复杂的方法。