如何在 HTML 文本区域中添加换行符?
htmlweb developmentfront end technology更新于 2024/12/22 20:28:17
要在 HTML 文本区域中添加换行符，我们可以使用 HTML 换行符标签在任意位置插入换行符。或者，我们也可以使用 CSS 属性"white-space: pre-wrap"自动为文本添加换行符。这在文本区域显示预格式化文本时尤其有用。因此，让我们讨论一下添加换行符的方法。
方法
在 HTML 中创建一个文本区域并为其分配一个 ID。
创建一个按钮，点击该按钮时将使用换行符拆分文本区域的文本。
现在创建一个将文本拆分为换行符的函数。此函数的代码如下:-
function replacePeriodsWithLineBreaks() {
// 获取 textarea 元素
var textarea = document.getElementById("textarea");
// 从 textarea 获取文本
var text = textarea.value;
// 将句点替换为换行符
text = text.replace(/\./g, "
");
// 使用新文本更新 textarea
textarea.value = text;
}
Example
此方法的最终代码将是-
<!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 replacePeriodsWithLineBreaks() {
// 获取 textarea 元素
var textarea = document.getElementById("textarea");
// 从 textarea 获取文本
var text = textarea.value;
// 将句点替换为换行符
text = text.replace(/\./g, "
");
// 使用新文本更新 textarea
textarea.value = text;
}
</script>
</body>
</html>
在此示例中，JavaScript 代码首先使用 getElementById() 方法通过 id 获取 textarea 元素。然后，使用 value 属性从 textarea 获取文本。接下来，使用 replace() 方法将所有句点替换为换行符。最后，使用 value 属性将 textarea 更新为新文本。
注意:正则表达式 /\./g 中的 g 标志用于替换所有出现的句点。如果没有该标志，则只会替换第一个出现的句点。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
