Home > Article > Web Front-end > How to add line breaks in HTML textbox?
How to add line breaks in HTML textbox?
- 王林forward
- 2023-09-04 11:05:062312browse
To add a line break to an HTML text area, we can use the HTML line break tag to insert a line break anywhere. Alternatively, we can also use the CSS property "white-space: pre-wrap" to automatically add line breaks to the text. This is particularly useful when displaying preformatted text in a text area. So let’s discuss ways to add line breaks.
method
Create a text area in HTML and assign it an id.
Create a button that when clicked will split the text of the text area using line breaks.
Now create the function that splits the text into newlines. The code of this function is -
function replacePeriodsWithLineBreaks() {
// Get the textarea element
var textarea = document.getElementById("textarea");
// Get the text from the textarea
var text = textarea.value;
// Replace periods with line breaks
text = text.replace(/\./g, "");
// Update the textarea with the new text
textarea.value = text;
}
Example
The final code for this method is -
<!DOCTYPE html>
<html>
<head>
<title>Add Line Breaks</title>
</head>
<body>
<textarea id="textarea" rows="10" cols="50"></textarea>
<br>
<button id="replace-btn" onclick="replacePeriodsWithLineBreaks()">Replace Periods with Line Breaks</button>
<script>
// Function to replace periods with line breaks in the textarea
function replacePeriodsWithLineBreaks() {
// Get the textarea element
var textarea = document.getElementById("textarea");
// Get the text from the textarea
var text = textarea.value;
// Replace periods with line breaks
text = text.replace(/\./g, "");
// Update the textarea with the new text
textarea.value = text;
}
</script>
</body>
</html>
In this example, the JavaScript code first gets the textarea element by its id using the getElementById() method. It then uses the value attribute to get the text from the text area. Next, it uses the Replace() method to replace all instances of periods with newlines. Finally, it updates the text area with the new text using the value attribute.
Note: The g flag in the regular expression /\./g is used to replace all occurrences of periods. Without it, only the first occurrence will be replaced.
The above is the detailed content of How to add line breaks in HTML textbox?. For more information, please follow other related articles on the PHP Chinese website!