Search code examples
javascripttextarealine-breaks

HTML textarea to javascript and keep line break


I am trying to pass a HTML <textarea> through JavaScript, and want to keep the line breaks. Ex when I write:

Line a
Line b

It comes out as:

Line a Line b

My code:

function textwrite(){
  thetext = document.getElementById("text_change").value;    
  document.getElementById("demo").innerHTML = thetext;
}
<textarea id='text_change' oninput='textwrite()'></textarea>
    
<p id="demo"></p>

And I don't want to use <pre> tag.


Solution

  • Replace \n,\r,\n\r with </br> in java script:

    var myLineBreak = thetext.replace(/\r\n|\r|\n/g,"</br>");
    

    function textwrite(){
        	thetext = document.getElementById("text_change").value;  
          var myLineBreak = thetext.replace(/\r\n|\r|\n/g,"</br>");
    
        	document.getElementById("demo").innerHTML = myLineBreak;
        }
    <textarea id='text_change' oninput='textwrite()'></textarea>
        
        <p id="demo"></p>