Maison > Article > interface Web > Comment ajouter des sauts de ligne dans une zone de texte HTML ?

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

王林avant: 2023-09-04 11:05:062312parcourir

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

Exemple

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>

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：En HTML, centrez un élément et alignez à droite/gauche les autres éléments flexboxArticle suivant：En HTML, centrez un élément et alignez à droite/gauche les autres éléments flexbox

Articles Liés

Voir plus