How to get content of each line on textarea

If textarea display line 1 ![Screen Shot 2025-02-21 at 17.32.49.png] and line 2 is (http://localhost:9001/article/680x_4a9d1136-fafb-40dc-8a47-72ca0b24bf46.png), how can I get content of textarea by array of line content. That mean from image I expect I can get array like below

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

My textarea display

Here is my code

<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>
  
  <script>  
  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;
  }
  </script>