¿Cómo agregar saltos de línea a un área de texto HTML?

Estoy editando un <textarea>con JavaScript. El problema es que cuando hago saltos de línea, no se mostrarán. ¿Cómo puedo hacer esto?

Estoy obteniendo el valor para escribir una función, pero no dará saltos de línea.

El problema proviene del hecho de que los saltos de línea ( \n\r?) No son lo mismo que las <br/>etiquetas HTML

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

ACTUALIZAR

Dado que muchos de los comentarios y mi propia experiencia me han demostrado que esta <br> solución no funciona como se esperaba, aquí hay un ejemplo de cómo agregar una nueva línea al textareauso de '\ r \ n'

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

Decidí hacer esto una edición, y no como una nueva pregunta porque esta es una respuesta demasiado popular para estar equivocada o incompleta.

si usa un script java general y necesita asignar una cadena al valor del área de texto, entonces

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

es necesario sustituir \no < br >al\\\n

de lo contrario da Uncaught SyntaxError: Unexpected token ILLEGALen todos los navegadores.

Quizás alguien encuentre esto útil:

Tuve problemas con los saltos de línea que se pasaron de la variable del servidor a la variable de JavaScript, y luego JavaScript los estaba escribiendo en textarea (usando enlaces de valor knockout.js).

la solución fue escapar dos veces de nuevas líneas:

orginal.Replace("\r\n", "\\r\\n")

en el lado del servidor, porque con solo caracteres de escape javascript no se estaba analizando.

Necesitas usar \npara linebreaksadentrotextarea

Si desea mostrar texto dentro de su propia página, puede usar la <pre>etiqueta.

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});

<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>

Una nueva línea es solo un espacio en blanco para el navegador y no se tratará de manera diferente a un espacio normal (""). Para obtener una nueva línea, debe insertar <BR />elementos.

Otro intento de resolver el problema: escriba el texto en el área de texto y luego agregue algo de JavaScript detrás de un botón para convertir los caracteres invisibles en algo legible y volcar el resultado en a DIV. Eso te dirá lo que tu navegador quiere.

Tengo un área de texto con ID es #infoartist seguir:

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

En el código de JavaScript, obtendré el valor de textarea y reemplazaré la nueva línea de escape (\ n \ r) por <br />etiqueta, como:

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

Entonces, si está utilizando jquery (como yo):

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

Espero que te haya ayudado. :-)

Si solo necesita enviar el valor de testarea al servidor con saltos de línea, use nl2br

Aquí está lo que hice por el mismo problema que tuve.

cuando paso el texto a la página siguiente en jsp, lo estoy leyendo como un área de texto en lugar de leer algo como

así que la salida llegó como querías. y para otras propiedades, puede usar lo siguiente.

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>