JavaScript Add Line Breaks to An HTML Textarea
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.
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.
