¿Cómo reemplazo todos los saltos de línea en una cadena con elementos <br />?

¿Cómo puedo leer el salto de línea de un valor con JavaScript y reemplazar todos los saltos de línea con <br /> elementos?

Ejemplo:

Una variable pasada de PHP como se muestra a continuación:

  "This is man.

     Man like dog.
     Man like to drink.

     Man is the king."

Me gustaría que mi resultado se vea así después de que JavaScript lo convierta:

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

Esto convertirá todos los retornos en HTML

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

En caso de que te preguntes qué ?: significa. Se llama un grupo sin captura. Significa que el grupo de expresiones regulares dentro de los paréntesis no se guardará en la memoria para que se haga referencia más adelante. Puede consultar estos hilos para obtener más información:
https://stackoverflow.com/a/11530881/5042169 https://stackoverflow.com/a/36524555/5042169

Si su preocupación es solo mostrar saltos de línea, puede hacerlo con CSS.

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

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

Nota : Preste atención al formateo y sangría del código, ya white-space: pre-lineque mostrará todas las líneas nuevas (excepto la última línea nueva después del texto, ver violín).

Sin expresiones regulares:

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

Esto funciona para entradas provenientes de un área de texto

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

Si la respuesta aceptada no funciona bien para usted, entonces puede intentarlo.

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

Funcionó para mi.

Independientemente del sistema:

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

También es importante codificar el resto del texto para protegerse de posibles ataques de inyección 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'));
        }
    }
}

Esto funcionó para mí cuando el valor vino de un TextBox:

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

Para aquellos de ustedes que solo quieren permitir max. 2 <br>seguidos, puedes usar esto:

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

Primera línea: busque \nOR \r\ndonde al menos 2 de ellos están en una fila, por ejemplo \n\n\n\n. Luego reemplácelo con 2br

Segunda línea: busque todos los únicos \r\no \nreemplácelos por<br>

si envía la variable desde PHP, puede obtenerla con esto antes de enviar:

$string=nl2br($string);

Reemplazará toda línea nueva con descanso

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

Si desea reemplazar todas las líneas nuevas con una sola línea de corte

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

Lea más sobre Regex: https://dl.icewarp.com/online_help/203030104.htm esto lo ayudará en todo momento.

No respondo la pregunta específica, pero estoy seguro de que esto ayudará a alguien ...

Si tiene una salida de PHP que desea representar en una página web usando JavaScript (quizás el resultado de una solicitud de Ajax), y solo desea retener espacios en blanco y saltos de línea, considere encerrar el texto dentro de un <pre></pre>bloque:

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

Tratar

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>