Come posso sostituire tutte le interruzioni di riga in una stringa con elementi <br />?

Come posso leggere l'interruzione di riga da un valore con JavaScript e sostituire tutte le interruzioni di riga con <br />elementi?

Esempio:

Una variabile passata da PHP come di seguito:

  "This is man.

     Man like dog.
     Man like to drink.

     Man is the king."

Vorrei che il mio risultato fosse simile a questo dopo che lo ha convertito JavaScript:

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

Ciò trasformerà tutti i ritorni in HTML

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

Nel caso ti chiedi cosa?: Significa. Si chiama un gruppo non di acquisizione. Significa che il gruppo di regex tra parentesi non verrà salvato in memoria per essere referenziato in seguito. Puoi consultare questi thread per ulteriori informazioni:
https://stackoverflow.com/a/11530881/5042169 https://stackoverflow.com/a/36524555/5042169

Se la tua preoccupazione è solo la visualizzazione di interruzioni di riga, puoi farlo con CSS.

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

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

Nota : prestare attenzione alla formattazione e al rientro del codice, poiché white-space: pre-linevisualizzerà tutte le nuove righe (tranne l'ultima riga successiva al testo, vedere violino).

Senza regex:

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

Funziona con input provenienti da un'area di testo

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

Se la risposta accettata non funziona correttamente per te, potresti provare.

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

Ha funzionato per me.

Indipendentemente dal sistema:

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

È anche importante codificare il resto del testo per proteggere da possibili attacchi di iniezione di 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'));
        }
    }
}

Questo ha funzionato per me quando il valore è venuto da un TextBox:

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

Per quelli di voi che vogliono solo consentire max. 2 <br>di fila, puoi usare questo:

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

Prima riga: cerca \nOR \r\ndove almeno 2 di essi sono in fila, ad es \n\n\n\n. Quindi sostituirlo con 2br

Seconda riga: cercare tutti i singoli \r\no \nsostituirli con<br>

se invii la variabile da PHP, puoi ottenerla prima di inviare:

$string=nl2br($string);

Sostituirà tutte le nuove linee con interruzioni

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

Se si desidera sostituire tutte le nuove linee con una singola linea di interruzione

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

Maggiori informazioni su Regex: https://dl.icewarp.com/online_help/203030104.htm questo ti aiuterà ogni volta.

Non rispondere alla domanda specifica, ma sono sicuro che questo aiuterà qualcuno ...

Se hai un output da PHP che vuoi renderizzare su una pagina web usando JavaScript (forse il risultato di una richiesta Ajax) e vuoi solo conservare spazi bianchi e interruzioni di riga, considera solo di racchiudere il testo all'interno di un <pre></pre>blocco:

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

Provare

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>