"What is the best way to store the last three lines of text from a textarea into three separate variables

Question

"What is the best way to store the last three lines of text from a textarea into three separate variables

I am working with an HTML file that contains a textarea tag. My goal is to copy and paste text with multiple lines into the textarea and then use JavaScript to extract the last three lines into three separate variables. The textarea has the id "txt" assigned to it. The function "clicked" is assigned to a button in the HTML file.

function clicked(){
    var txt = document.getElementById("txt");
    var original = txt.value; //original text transferred to original variable
    
    var lastline =  //store the last line in this variable
    
    var secondlast = //store the second to last line in this variable
    
    var thirdlast = //store the third to last line in this variable
    
    var modified = //store text without these three lines in this variable
    
    console.log(lastline); //how are you
    console.log(secondlast); //now is the time
    console.log(thirdlast); //helloo  there
    console.log(modified); //school data is the important
                         //checking home
                         //not there
  }

Text inputted in textarea:

school data is the important
  checking home
  not there
  helloo  there
  now is the time
  how are you

Output:

how are you
  now is the time
  helloo  there
  school data is the important
  checking home
  not there

javascript html css dom

Answer 1

Answer №1

Here is a straightforward function:

function rearrangeText() {
  var area= document.getElementById("mytext"),
  //store all the lines in the textarea, separated by \n or \r\n
      lines = area.value.match(/[^\r\n]+/g),
  //extract the bottom 3 lines and reverse them
      bottom3 = lines.slice(-3).reverse();

  var lastline=bottom3[0];
  var secondlast=bottom3[1];
  var thirdlast=bottom3[2];

  //remove the bottom 3 lines from the text, join the rest together with linefeed
  var rest = lines.slice(0, -3).join("\n");

  //combine bottom3 and rest
  var result=bottom3.join("\n")+"\n"+rest;

  //update the textarea with the rearranged text
  area.value=result;
}

Answer 2

Here is a straightforward function:

function rearrangeText() {
  var area= document.getElementById("mytext"),
  //store all the lines in the textarea, separated by \n or \r\n
      lines = area.value.match(/[^\r\n]+/g),
  //extract the bottom 3 lines and reverse them
      bottom3 = lines.slice(-3).reverse();

  var lastline=bottom3[0];
  var secondlast=bottom3[1];
  var thirdlast=bottom3[2];

  //remove the bottom 3 lines from the text, join the rest together with linefeed
  var rest = lines.slice(0, -3).join("\n");

  //combine bottom3 and rest
  var result=bottom3.join("\n")+"\n"+rest;

  //update the textarea with the rearranged text
  area.value=result;
}

Answer 3

Answer №2

When dealing with line breaks in a textarea, it's important to note that they are represented by line break characters and not HTML elements like <br>.

To extract individual lines from the textarea, you can normalize the line breaks to \n and then utilize the split() method on the textarea's value.

Below is a helpful utility function that executes a function for each line within a textarea's value:

function performActionOnEachLine(textarea, func) {
    var lines = textarea.value.replace(/\r\n/g, "\n").split("\n");
    var newLines, i;

    if (typeof lines.map != "undefined") {
        newLines = lines.map(func);
    } else {
        newLines = [];
        i = lines.length;
        while (i--) {
            newLines[i] = func(lines[i]);
        }
    }
    textarea.value = newLines.join("\r\n");
}

var textarea = document.getElementById("txt");
var lines = [];  // Store each line in an array
performActionOnEachLine(textarea, function(line) {
    lines.push(line);
});

Answer 4

When dealing with line breaks in a textarea, it's important to note that they are represented by line break characters and not HTML elements like <br>.

To extract individual lines from the textarea, you can normalize the line breaks to \n and then utilize the split() method on the textarea's value.

Below is a helpful utility function that executes a function for each line within a textarea's value:

function performActionOnEachLine(textarea, func) {
    var lines = textarea.value.replace(/\r\n/g, "\n").split("\n");
    var newLines, i;

    if (typeof lines.map != "undefined") {
        newLines = lines.map(func);
    } else {
        newLines = [];
        i = lines.length;
        while (i--) {
            newLines[i] = func(lines[i]);
        }
    }
    textarea.value = newLines.join("\r\n");
}

var textarea = document.getElementById("txt");
var lines = [];  // Store each line in an array
performActionOnEachLine(textarea, function(line) {
    lines.push(line);
});

Answer 5

Answer №3

This solution is very straightforward.

var lastline,secondlast,thirdlast,modified;
function parse()
{
    var elem = document.getElementById("txt");
    var text = elem.value;
    var arr = text.replace(/\n/g,"$").split("$");
    if(arr.length) lastline = arr.pop();
    if(arr.length) secondlast = arr.pop();
    if(arr.length) thirdlast = arr.pop();
    modified = arr.join("\n");
    console.log(lastline,secondlast,thirdlast);
    console.log(modified);
}

<textarea id="txt"></textarea>
<button onclick="parse()">Parse</button>

Answer 6

This solution is very straightforward.

var lastline,secondlast,thirdlast,modified;
function parse()
{
    var elem = document.getElementById("txt");
    var text = elem.value;
    var arr = text.replace(/\n/g,"$").split("$");
    if(arr.length) lastline = arr.pop();
    if(arr.length) secondlast = arr.pop();
    if(arr.length) thirdlast = arr.pop();
    modified = arr.join("\n");
    console.log(lastline,secondlast,thirdlast);
    console.log(modified);
}

<textarea id="txt"></textarea>
<button onclick="parse()">Parse</button>

"What is the best way to store the last three lines of text from a textarea into three separate variables

Answer №1

Answer №2

Answer №3

Similar questions

Looking for a way to make this HTML tab appear using ng-show and an external variable in AngularJS - seeking guidance as a beginner!

In which location are HTML files stored within WordPress plugins?

JSON data not displaying correctly in bootstrap table

Exploring Relative Rotations in Three.js

Node.js population process

Unpacking Functions within Embedded Redux Reducer

I can't seem to figure out why my attempts to set a cookie through Express are failing

Issue with background image positioning in IE 7 while scrolling

Dynamic Population of Django Drop Down List using JavaScript

ASP.NET repeater causing jQuery scrollTop to malfunction after first use

Creating text on a background image that does not adapt to different screen sizes is

Instructions on how to save HTML "innerHTML" along with attributes to a text document

adjust the dimensions of the clickable icon's background

The scrolling feature in the option list for Adobe Air Client and Javascript appears to be non-functional

Using JSON data to render images onto a canvas

Creating Secure JWT Tokens

Trouble with CSS navigation

Blurring the background creates an "inset shadow" problem when transitioning

What is the best way to capture dynamic import errors in JavaScript?

"Although disabled, input elements can still be focused on in Firefox browser