Comment remplacer les sauts de ligne par br en JavaScript ?

Réponses rédigées par Antoine
Dernière mise à jour : 2022-04-21 11:58:10
Thèmes : javascript
Question

Comment faire pour remplacer les sauts de ligne par des <br> en JavaScript ?

Réponse

Pour remplacer les sauts de ligne \n et / ou \r par la balise HTML <br>, en JavaScript, vous pouvez utiliser la méthode replace() avec une expression régulière.

L'expression régulière (?:\r\n|\r|\n) permet d'identifier la présence d'un retour chariot et d'une nouvelle ligne, ou bien uniquement un retour chariot, ou bien une nouvelle ligne seule.

Voici un exemple pour remplacer les \n et \r par des <br> avec JavaScript et la méthode replace() :

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment remplacer les sauts de ligne par br en JavaScript ?</title>
</head>
<body>
<div id="conteneur"></div>
<button onClick="remplacer();">Remplacer \n par br</button>
<script>
  let texte = "Bienvenue \n sur le site \r\n 1FORMATIK.com";
  let conteneur = document.getElementById("conteneur");
  conteneur.innerHTML = texte;
  function remplacer() {
    texte = texte.replace(/(?:\r\n|\r|\n)/g, "<br>");
    conteneur.innerHTML = texte;
  }
</script>
</body>
</html>