Como substituo todas as quebras de linha em uma string por elementos <br />?

Como posso ler a quebra de linha de um valor com JavaScript e substituir todas as quebras de linha por <br />elementos?

Exemplo:

Uma variável passada do PHP como abaixo:

  "This is man.

     Man like dog.
     Man like to drink.

     Man is the king."

Gostaria que meu resultado fosse algo assim depois que o JavaScript o converter:

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

Isso transformará todos os retornos em HTML

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

Caso você queira saber o que?: Significa. É chamado de grupo não capturante. Isso significa que o grupo de regex entre parênteses não será salvo na memória para referência posteriormente. Você pode verificar esses tópicos para obter mais informações:
https://stackoverflow.com/a/11530881/5042169 https://stackoverflow.com/a/36524555/5042169

Se sua preocupação é apenas exibir quebras de linha, você pode fazer isso com CSS.

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

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

Nota : Preste atenção à formatação e recuo do código, pois white-space: pre-lineexibirá todas as novas linhas (exceto a última nova linha após o texto, consulte violino).

Sem regex:

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

Isso funciona para entradas provenientes de uma área de texto

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

Se a resposta aceita não estiver funcionando corretamente para você, tente.

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

Funcionou para mim.

Independentemente do sistema:

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

Também é importante codificar o restante do texto para proteger contra possíveis ataques de injeção 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'));
        }
    }
}

Isso funcionou para mim quando o valor veio de um TextBox:

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

Para aqueles que desejam apenas permitir lances máximos 2 <br>em uma linha, você pode usar isto:

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

Primeira linha: pesquise \nOR \r\nonde pelo menos 2 deles estejam seguidos, por exemplo \n\n\n\n. Em seguida, substitua-o por 2br

Segunda linha: pesquise todas as únicas \r\nou \nsubstitua-as por<br>

se você enviar a variável do PHP, poderá obtê-la com isso antes de enviar:

$string=nl2br($string);

Substituirá toda a nova linha por quebra

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

Se você deseja substituir toda a nova linha por uma única linha

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

Leia mais sobre o Regex: https://dl.icewarp.com/online_help/203030104.htm, isso ajudará você sempre.

Não estou respondendo a uma pergunta específica, mas tenho certeza de que isso ajudará alguém ...

Se você tiver uma saída do PHP que deseja renderizar em uma página da Web usando JavaScript (talvez o resultado de uma solicitação do Ajax) e apenas queira manter espaço em branco e quebras de linha, considere apenas colocar o texto dentro de um <pre></pre>bloco:

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

Tentar

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>