HTML 如何在HTML文本区域中添加换行符

要在HTML文本区域中添加换行符，我们可以使用HTML换行符标签在我们想要的地方插入一个换行符。另外，我们也可以使用CSS属性 “white-space: pre-wrap “来自动给文本添加换行符。在文本框中显示预先格式化的文本时，这一点特别有用。因此，我们来讨论一下添加换行符的方法。

方法

在HTML中创建一个textarea，并为其分配一个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;
}

例子

这种方法的最终代码将是 –

<!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属性从textarea获取文本。接下来，它使用replace()方法将所有句号的实例替换为换行符。最后，它使用value属性用新的文本更新textarea。

注意：正则表达式//./g中的g标志被用来替换所有出现的句号。如果没有它，只有第一次出现的句号会被替换。