Get Each Line from Textarea

How to read line by line of a text area HTML tag

Try this.

var lines = $('textarea').val().split('\n');
for(var i = 0;i < lines.length;i++){
    //code here using lines[i] which will give you each line
}

Get each line from textarea

You will want to look into the nl2br() function along with the trim().

The nl2br() will insert <br /> before the newline character (\n) and the trim() will remove any ending \n or whitespace characters.

$text = trim($_POST['textareaname']); // remove the last \n or whitespace character
$text = nl2br($text); // insert <br /> before \n 

That should do what you want.

UPDATE

The reason the following code will not work is because in order for \n to be recognized, it needs to be inside double quotes since double quotes parse data inside of them, where as single quotes takes it literally, IE "\n"

$text = str_replace('\n', '<br />', $text);

To fix it, it would be:

$text = str_replace("\n", '<br />', $text);

But it is still better to use the builtin nl2br() function, PHP provides.

EDIT

Sorry, I figured the first question was so you could add the linebreaks in, indeed this will change the answer quite a bit, as anytype of explode() will remove the line breaks, but here it is:

$text = trim($_POST['textareaname']);
$textAr = explode("\n", $text);
$textAr = array_filter($textAr, 'trim'); // remove any extra \r characters left behind

foreach ($textAr as $line) {
    // processing here. 
} 

If you do it this way, you will need to append the <br /> onto the end of the line before the processing is done on your own, as the explode() function will remove the \n characters.

Added the array_filter() to trim() off any extra \r characters that may have been lingering.

Get the text from textarea line by line?

You can use something like this. This will insert line breaks into into the textarea.

Credits: https://stackoverflow.com/a/4722395/4645728

$(document).ready(function() {    $("#test").val("123e2oierhqwpoiefdhqwopidfhjcospid");});
$("#button_test").on("click", function() {    ApplyLineBreaks("test");    var as = document.getElementById("test").value;    console.log(as);});
//https://stackoverflow.com/a/4722395/4645728function ApplyLineBreaks(strTextAreaId) {    var oTextarea = document.getElementById(strTextAreaId);    if (oTextarea.wrap) {        oTextarea.setAttribute("wrap", "off");    } else {        oTextarea.setAttribute("wrap", "off");        var newArea = oTextarea.cloneNode(true);        newArea.value = oTextarea.value;        oTextarea.parentNode.replaceChild(newArea, oTextarea);        oTextarea = newArea;    }
    var strRawValue = oTextarea.value;    oTextarea.value = "";    var nEmptyWidth = oTextarea.scrollWidth;    var nLastWrappingIndex = -1;    for (var i = 0; i < strRawValue.length; i++) {        var curChar = strRawValue.charAt(i);        if (curChar == ' ' || curChar == '-' || curChar == '+')            nLastWrappingIndex = i;        oTextarea.value += curChar;        if (oTextarea.scrollWidth > nEmptyWidth) {            var buffer = "";            if (nLastWrappingIndex >= 0) {                for (var j = nLastWrappingIndex + 1; j < i; j++)                    buffer += strRawValue.charAt(j);                nLastWrappingIndex = -1;            }            buffer += curChar;            oTextarea.value = oTextarea.value.substr(0, oTextarea.value.length - buffer.length);            oTextarea.value += "\n" + buffer;        }    }    oTextarea.setAttribute("wrap", "");}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><textarea id="test"></textarea><button id="button_test">Ok</button>

How to read text line by line in a html text area?

You're looking for the Javascript split() method.

Get Text From Textarea, and Storing Each Line in a Separate Variable

If you're looking to keep a specific format I wouldn't recommend using textarea as users are known to input unpredictable things.

You can get each line of a <textarea id="mytextarea"></textarea> by using this code:

document.getElementById('mytextarea').value.split('\n');

This will give you something like this

 const resultArr = ["Amy and John Smith", "12/14/95", "I'll always be by your side"]

You can then use resultArr and map everything to your variables like so

var engravementLine1 = resultArr[0];
var engravementLine2 = resultArr[1];
var engravementLine3 = resultArr[2];

Update: Look at parse a textarea in substrings based on line breaks in Javascript

Textarea - get each line, find line breaks

So the way I did it was:

• Clone the textarea in question - $("#text") into a transparent textarea. Use transparent font.
• Change id value of clone to, say, $("#newtext") and append it to DOM.
• On every keyup, we take the value of $("#text") before this character's keyup. Put that value into $("#newtext") and check if $("#newtext").get(0).scrollHeight() > $("#newtext").height(). If true => this character caused a line break.
• Increase rows of $("#newtext") in a loop until
  $("#newtext").get(0).scrollHeight() === $("#newtext").height()
• Take text before this character, add a \n, add this character to $("#newtext").val()
• Apply $("#newtext").val() to $("#text").val().
• Remove $("#newtext") from DOM.
• Repeat all of above steps on every keyup event

Above answer works on similar lines as - stackoverflow.com/questions/3738490/finding-line-wraps – evolutionxbox yesterday

So, basically we convert line breaks into newlines which can be found by using $("#text").val().split("\n").


(Note - If we don't append transparent textarea to the DOM, its scrollHeight() will be undefined)

How to print each line from textarea using innerHTML and javascript

You can use the value property to get the text out of the texarea. Then replace each newline with the desired text.

function printonpage() {    var text = document.getElementById('targetTextArea');    var val = text.value;    var arr = val.split("\n");
    arr = arr.slice(0, arr.length -1);
    var newText = "Read " + arr.join("<br>Read ");    var output = document.getElementById('output');        output.innerHTML = newText;}

Print the contents of textarea as is inside html page<br/><textarea rows="6" cols="50" id="targetTextArea">How to print each line from textarea using innerHTML and javascript</textarea><br/><button type="button" onclick="printonpage()">Print on Page</button><div id="output"></div>

Reading text in textarea line by line

Here's updated js...

Demo Fiddle

$('input[type=button]').click(function () {
    var html = "";
    var lines = $('#hi').val().split('\n');
    for (var i = 0; i < lines.length; i++) {
        //code here using lines[i] which will give you each line
        html += lines[i];
        html += ",";
    }
    html = html.substring(0,html.length-1);
    $("#inthis").html(html);
});

javascript read each line into array from a modal textarea

try this

$("#save").click(function () {
  const value = $("#data").val();
  const splitted = value.split("\n");
  console.log(splitted);
});

jQuery each line in textarea

You are placing a string into a jQuery object. Just use the item instead:

$('button').click(() => {
  var arrayOfLines = $('#gps').val().split('\n');
  arrayOfLines.forEach(item => console.log(item));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<textarea id="gps" name="gps">28.73514, -147.42323
4.09974, 66.93197
49.11390, 48.85446</textarea>
<button>Click</button>

---

Related Topics