Comment ajouter des sauts de ligne dans une zone de texte HTML ?-tutoriel HTML-php.cn

Comment ajouter des sauts de ligne dans une zone de texte HTML ?

王林

Libérer： 2023-09-04 11:05:06

avant

2298 Les gens l'ont consulté

Comment ajouter des sauts de ligne dans une zone de texte HTML ?

Pour ajouter un saut de ligne à une zone de texte HTML, nous pouvons utiliser la balise de saut de ligne HTML pour insérer un saut de ligne n'importe où. Alternativement, nous pouvons également utiliser la propriété CSS "white-space: pre-wrap" pour ajouter automatiquement des sauts de ligne au texte. Ceci est particulièrement utile lors de l'affichage de texte préformaté dans une zone de texte. Discutons donc des façons d’ajouter des sauts de ligne.

Méthode

Créez une zone de texte en HTML et attribuez-lui un identifiant.
Créez un bouton qui, une fois cliqué, divisera le texte de la zone de texte à l'aide de sauts de ligne.
Créez maintenant une fonction qui divise le texte en nouvelles lignes. Le code de cette fonction est -

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

Copier après la connexion

Exemple< /p>

Le code final de cette méthode est -

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

Copier après la connexion

Dans cet exemple, le code JavaScript obtient d'abord l'élément textarea par son identifiant à l'aide de la méthode getElementById(). Il utilise ensuite l'attribut value pour obtenir le texte de la zone de texte. Ensuite, il utilise la méthode Replace() pour remplacer toutes les instances de points par des nouvelles lignes. Enfin, il met à jour la zone de texte avec le nouveau texte à l'aide de l'attribut value.

Remarque : L'indicateur g dans l'expression régulière /./g est utilisé pour remplacer toutes les occurrences de points. Sans cela, seule la première occurrence sera remplacée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!