如何在HTML文字方塊中新增換行符號？-html教學-PHP中文網

如何在HTML文字方塊中新增換行符號？

王林

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

轉載

2301 人瀏覽過

如何在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;
}

登入後複製

範例< /p>

此方法的最終程式碼為 -

<!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中文網其他相關文章！