JavaScript Add Line Breaks to An HTML Textarea

avatar
Published: Mar 13, 2023

Hello devs, today I'll show you how to add line breaks into the inputted values of textarea element. We'll add line breaks into words which is ended by fullstop(.).  So, let's see an example below.

Example

So to achieve our expected result we'll use two javascript functions called string.split('.') and string.join('</br>'). Where with split()  function we'll differentiate the sentence through the fullstop(.). Then after split we'll join those strings with br tag as our goal is to add line breaks. So, let's move into the real implementation. See the below source code.

<!DOCTYPE html> 
<html> 
<head> 
     <title>Add Line Breaks to Textarea</title> 
</head> 
<body> 
     <form> 
          ENTER TEXT with fullstop(.): 
          <br> 
          <textarea rows="20" cols="40" name="txt" id="textarea"></textarea> 
          <br> 
          <br> 
          <button type="button"
               name="submit" 
               onclick="divide()" />Submit</button>
     </form> 

     <script type="text/javascript"> 
          function divide() { 
               var txt; 
               txt = document.getElementById('a').value; 
               var text = txt.split("."); 
               var str = text.join('.</br>'); 
               document.write(str); 
          } 
     </script> 
</body> 
</html> 

Which will produce the below result.

That's it for today. I hope you've enjoyed this tutorial. Thanks for reading.

Comments

No comments yet…