Comment remplacer tous les sauts de ligne d'une chaîne par des éléments <br />?

Comment puis-je lire le saut de ligne d'une valeur avec JavaScript et remplacer tous les sauts de ligne par des <br />éléments?

Exemple:

Une variable passée de PHP comme ci-dessous:

  "This is man.

     Man like dog.
     Man like to drink.

     Man is the king."

J'aimerais que mon résultat ressemble à ceci après que le JavaScript l'ait converti:

  "This is man<br /><br />Man like dog.<br />Man like to drink.<br /><br />Man is the king."

Cela transformera tous les retours en HTML

str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');

Si vous vous demandez quoi?: Signifie. Il s'agit d'un groupe non capturant. Cela signifie que le groupe d'expressions régulières entre parenthèses ne sera pas enregistré en mémoire pour être référencé plus tard. Vous pouvez consulter ces discussions pour plus d'informations:
https://stackoverflow.com/a/11530881/5042169 https://stackoverflow.com/a/36524555/5042169

Si votre souci est simplement d'afficher des sauts de ligne, vous pouvez le faire avec CSS.

<div style="white-space: pre-line">Some test
with linebreaks</div>

Jsfiddle: https://jsfiddle.net/5bvtL6do/2/

Remarque : Faites attention au formatage et à l'indentation du code, car white-space: pre-lineaffichera tous les retours à la ligne (sauf le dernier retour à la ligne après le texte, voir violon).

Sans regex:

str = str.split("\n").join("<br />");

Cela fonctionne pour les entrées provenant d'une zone de texte

str.replace(new RegExp('\r?\n','g'), '<br />');

Si la réponse acceptée ne vous convient pas, vous pouvez essayer.

str.replace(new RegExp('\n','g'), '<br />')

Ça a marché pour moi.

Quel que soit le système:

my_multiline_text.replace(/$/mg,'<br>');

Il est également important de coder le reste du texte afin de se protéger d'éventuelles attaques par injection de script

function insertTextWithLineBreaks(text, targetElement) {
    var textWithNormalizedLineBreaks = text.replace('\r\n', '\n');
    var textParts = textWithNormalizedLineBreaks.split('\n');

    for (var i = 0; i < textParts.length; i++) {
        targetElement.appendChild(document.createTextNode(textParts[i]));
        if (i < textParts.length - 1) {
            targetElement.appendChild(document.createElement('br'));
        }
    }
}

Cela a fonctionné pour moi lorsque la valeur provenait d'une zone de texte:

string.replace(/\n|\r\n|\r/g, '<br/>');

Pour ceux d'entre vous qui veulent juste permettre max. 2 <br>d'affilée, vous pouvez utiliser ceci:

let text = text.replace(/(\r?\n){2,}/g, '<br><br>');
text = text.replace(/(\r?\n)/g, '<br>');

Première ligne: recherchez \nOU \r\noù au moins 2 d'entre eux sont consécutifs, par exemple \n\n\n\n. Puis remplacez-le par 2br

Deuxième ligne: recherchez tous les single \r\nou \nremplacez-les par<br>

si vous envoyez la variable depuis PHP, vous pouvez l'obtenir avec ceci avant d'envoyer:

$string=nl2br($string);

Il remplacera toute nouvelle ligne avec rupture

str = str.replace(/\n/g, '<br>')

Si vous souhaitez remplacer toute nouvelle ligne par une seule ligne de rupture

str = str.replace(/\n*\n/g, '<br>')

En savoir plus sur Regex: https://dl.icewarp.com/online_help/203030104.htm cela vous aidera à chaque fois.

Ne répondant pas à la question spécifique, mais je suis sûr que cela aidera quelqu'un ...

Si vous avez une sortie de PHP que vous souhaitez rendre sur une page Web en utilisant JavaScript (peut-être le résultat d'une demande Ajax), et que vous souhaitez simplement conserver les espaces blancs et les sauts de ligne, pensez simplement à enfermer le texte dans un <pre></pre>bloc:

var text_with_line_breaks = retrieve_some_text_from_php();
var element = document.querySelectorAll('#output');
element.innerHTML = '<pre>' + text_with_line_breaks + '</pre>';

Essayer

let s=`This is man.

     Man like dog.
     Man like to drink.

     Man is the king.`;
     
msg.innerHTML = s.replace(/\n/g,"<br />");

<div id="msg"></div>