如何在HTML文本框中添加换行符？-html教程-PHP中文网

如何在HTML文本框中添加换行符？

王林

发布： 2023-09-04 11:05:06

转载

4105人浏览过

如何在html文本框中添加换行符？

要向 HTML 文本区域添加换行符，我们可以使用 HTML 换行符标签在任意位置插入换行符。或者，我们也可以使用 CSS 属性“white-space: pre-wrap”自动为文本添加换行符。当在文本区域中显示预先格式化的文本时，这特别有用。因此，我们来讨论一下添加换行符的方法。

方法

在 HTML 中创建一个文本区域并为其分配一个 id。
创建一个按钮，单击该按钮将使用换行符分割文本区域的文本。
现在创建将文本分成换行符的函数。该函数的代码为 -

立即学习“前端免费学习笔记（深入）”；

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;
}

登录后复制

示例

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

此方法的最终代码为 -

<!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>

登录后复制

在此示例中，JavaScript 代码首先使用 getElementById() 方法通过其 id 获取 textarea 元素。然后，它使用 value 属性从文本区域获取文本。接下来，它使用 Replace() 方法将所有句点实例替换为换行符。最后，它使用 value 属性用新文本更新文本区域。

注意：正则表达式 /\./g 中的 g 标志用于替换所有出现的句点。如果没有它，只有第一个出现的地方会被替换。

以上就是如何在HTML文本框中添加换行符？的详细内容，更多请关注php中文网其它相关文章！