Heim >Web-Frontend >HTML-Tutorial >Wie füge ich Zeilenumbrüche in ein HTML-Textfeld ein?

Wie füge ich Zeilenumbrüche in ein HTML-Textfeld ein?

王林nach vorne: 2023-09-04 11:05:062371Durchsuche

Um einem HTML-Textbereich einen Zeilenumbruch hinzuzufügen, können wir das HTML-Zeilenumbruch-Tag verwenden, um an einer beliebigen Stelle einen Zeilenumbruch einzufügen. Alternativ können wir auch die CSS-Eigenschaft „white-space: pre-wrap“ verwenden, um automatisch Zeilenumbrüche in den Text einzufügen. Dies ist besonders nützlich, wenn vorformatierter Text in einem Textbereich angezeigt wird. Lassen Sie uns also Möglichkeiten zum Hinzufügen von Zeilenumbrüchen besprechen.

Methode

Erstellen Sie einen Textbereich in HTML und weisen Sie ihm eine ID zu.
Erstellen Sie eine Schaltfläche, die beim Klicken den Text des Textbereichs mithilfe von Zeilenumbrüchen teilt.
Erstellen Sie nun eine Funktion, die Text in Zeilenumbrüche aufteilt. Der Code dieser Funktion ist -

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

Beispiel

Der endgültige Code für diese Methode ist -

<!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 diesem Beispiel ruft der JavaScript-Code zunächst das Textarea-Element anhand seiner ID mithilfe der Methode getElementById() ab. Anschließend wird das Wertattribut verwendet, um den Text aus dem Textbereich abzurufen. Als nächstes verwendet es die Methode „Replace()“, um alle Vorkommen von Punkten durch Zeilenumbrüche zu ersetzen. Schließlich wird der Textbereich mithilfe des Wertattributs mit dem neuen Text aktualisiert.

Hinweis: Das g-Flag im regulären Ausdruck /./g wird verwendet, um alle Vorkommen von Punkten zu ersetzen. Ohne sie wird nur das erste Vorkommen ersetzt.

Das obige ist der detaillierte Inhalt vonWie füge ich Zeilenumbrüche in ein HTML-Textfeld ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Zentrieren Sie in HTML ein Element und richten Sie andere Flexbox-Elemente rechts/links ausNächster Artikel：Zentrieren Sie in HTML ein Element und richten Sie andere Flexbox-Elemente rechts/links aus

In Verbindung stehende Artikel

Mehr sehen