Jak zastąpić wszystkie podziały wiersza w łańcuchu elementami <br />?

Jak mogę odczytać podział wiersza z wartości za pomocą JavaScript i zastąpić wszystkie podziały wiersza <br />elementami?

Przykład:

Zmienna przekazana z PHP jak poniżej:

  "This is man.

     Man like dog.
     Man like to drink.

     Man is the king."

Chciałbym, aby mój wynik wyglądał tak po konwersji JavaScript:

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

Spowoduje to przekształcenie wszystkich zwrotów w HTML

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

Jeśli zastanawiasz się, co?: Oznacza. Nazywa się to grupą nie przechwytującą. Oznacza to, że grupa wyrażeń regularnych w nawiasach nie zostanie zapisana w pamięci, do której można będzie się później odwoływać. Możesz sprawdzić te wątki, aby uzyskać więcej informacji:
https://stackoverflow.com/a/11530881/5042169 https://stackoverflow.com/a/36524555/5042169

Jeśli Twoim zmartwieniem jest wyświetlanie przełamań linii, możesz to zrobić za pomocą CSS.

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

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

Uwaga : Zwróć uwagę na formatowanie i wcięcie kodu, ponieważ white-space: pre-linewyświetli się wszystkie nowe wiersze (z wyjątkiem ostatniego nowego wiersza po tekście, patrz skrzypce).

Bez wyrażenia regularnego:

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

Działa to w przypadku danych wejściowych z obszaru tekstowego

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

Jeśli zaakceptowana odpowiedź nie jest dla Ciebie odpowiednia, możesz spróbować.

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

To zadziałało dla mnie.

Niezależnie od systemu:

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

Ważne jest również zakodowanie pozostałej części tekstu, aby zabezpieczyć się przed możliwymi atakami skryptowymi

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

To działało dla mnie, gdy wartość pochodziła z TextBox:

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

Dla tych z Was, którzy chcą tylko pozwolić na maks. 2 <br>z rzędu możesz użyć tego:

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

Pierwszy wiersz: wyszukaj \nOR, \r\ngdzie przynajmniej 2 z nich są w rzędzie, np \n\n\n\n. Następnie zamień na 2br

Drugi wiersz: Wyszukaj wszystkie pojedyncze \r\nlub \nzamień je na<br>

jeśli wysyłasz zmienną z PHP, możesz ją uzyskać w ten sposób przed wysłaniem:

$string=nl2br($string);

Zastąpi całą nową linię łamaniem

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

Jeśli chcesz zastąpić całą nową linię pojedynczą linią przerwania

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

Przeczytaj więcej o Regex: https://dl.icewarp.com/online_help/203030104.htm, to pomoże Ci za każdym razem.

Nie odpowiadam na konkretne pytanie, ale jestem pewien, że to pomoże komuś ...

Jeśli masz dane wyjściowe z PHP, które chcesz wyrenderować na stronie internetowej za pomocą JavaScript (być może w wyniku żądania Ajax), a chcesz po prostu zachować białe znaki i podziały wierszy, rozważ umieszczenie tekstu w <pre></pre>bloku:

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

Próbować

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>