CODEWITHSUNDEEP
javascripthtml
A7med Aero
A7med Aero

Reputation: 13

How to print each line in textarea with javascript?

I want to show the value of the textarea in my div #result, preserving linebreaks in the textarea and adding 1 at the end of each line.

Here's what I've tried to far. It only adds 1 to the last line.

<!DOCTYPE html>
<html>
<head>
    <title>Hello World !</title>
</head>
<body>
<textarea rows="10" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="result"></div>

</body>
<script type="text/javascript">
  function test() {
  var b = document.getElementById('mytext').value+1;
  document.getElementById('result').innerHTML = b.replace(/\n\r?/g, '<br>');
}
</script>
</html>

Upvotes: 1

Views: 439

Answers (4)

Spectric
Spectric

Reputation: 31992

Your previous method was not working because you were adding 1 to the value and then splitting by linebreaks.

Instead, split the value by linebreaks (\n), then loop through each item, concatenate and insert into the result's innerHTML.

const result = document.getElementById("result");

function test() {
  result.innerHTML = "";
  document.getElementById('mytext').value
    .split("\n")
    .forEach(e => result.innerHTML += e + "1" + "<br>")
}
<!DOCTYPE html>
<html>

<head>
  <title>Hello World !</title>
</head>

<body>
  <textarea rows="10" id="mytext"></textarea>
  <button onclick="test()">Click Me</button>
  <div id="result"></div>

</body>

</html>

Upvotes: 2

JS_INF
JS_INF

Reputation: 467

  • you can match the text instead of replace new lines

Example

function test() {
 var b = document.getElementById('mytext').value;
 var matchText = b.match(/.+/gi);
 var res = document.getElementById('result');
 var txt = ""
 for(i = 0; i < matchText.length; i++) {
    txt += i+1 + ": "+ matchText[i] + "<br>"
  }
   res.innerHTML = txt
}

Upvotes: 0

Mister Jojo
Mister Jojo

Reputation: 22320

you can do that

const 
  myText   = document.querySelector('#my-text')
, myButton = document.querySelector('#my-button')
, pResult  = document.querySelector('#result')
  ;
myButton.onclick = () =>
  {
  pResult.innerHTML = myText.value
                      .split(/\n\r?/)
                      .reduce((t,l,i) => // better with a number?
                        t + `${i+1} - ${l}<br>`
                        ,'') 
  }
#my-text {
  height : 6em;
  }
#result {
  margin   : .7em;
  padding  : .4em;
  height   : 6em;
  width    : 10em;
  border   : 1px solid lightblue;
  resize   : both;
  overflow : auto;
  }
<textarea id="my-text"></textarea>
<button id="my-button">Click Me</button>
<div id="result"></div>

Upvotes: 0

Jaromanda X
Jaromanda X

Reputation: 1

As much as the first answer is "OK" - there's no need to add to innerHTML in a loop

in some cases (not something this simple) that can impact rendering and performance

set innerHTML once with this one line of code (split over multiple lines for readability

function test() {
  document.getElementById("result").innerHTML = 
    document.getElementById('mytext').value
    .split("\n")
    .map(v => v + 1)
    .join('<br>');
}
<textarea rows="10" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="result"></div>

Upvotes: 0

Related Questions