Saltos de línea en JavaScript: texto, HTML y CSS

El carácter de salto dentro de una cadena

\n representa un salto de línea. Es distinto de escribir dos caracteres, una barra y una n. La consola o un archivo de texto suelen mostrar ese salto directamente.

const mensaje = 'Primera línea\nSegunda línea';
console.log(mensaje.split('\n').length); // 2
console.log(JSON.stringify(mensaje)); // "Primera línea\nSegunda línea"

Al serializar como JSON verás una secuencia escapada: eso no implica que el dato contenga una barra literal. El formato JSON necesita representar el carácter dentro de una cadena válida.

Mostrar texto en una página

Un elemento HTML normal puede colapsar los espacios y saltos. Si quieres conservarlos como texto, combina textContent con una regla CSS apropiada, por ejemplo white-space: pre-wrap.

const salida = document.querySelector('#salida');
salida.textContent = 'Uno\nDos';
salida.style.whiteSpace = 'pre-wrap';

El ejemplo necesita un elemento con ese identificador. No utilices innerHTML con el texto de un visitante sólo para convertir saltos en etiquetas br: podrías interpretar otras etiquetas o atributos como marcado.

Datos de distintos sistemas

Algunos archivos usan \r\n y otros \n. Para separar líneas de un texto conocido puedes contemplar ambos formatos. No elimines cada retorno o salto sin conocer el contrato: un CSV con campos entrecomillados puede contener saltos dentro de una misma celda y necesita un lector adecuado.

const filas = 'a\r\nb\nc'.split(/\r?\n/);
console.log(JSON.stringify(filas)); // ["a","b","c"]

Un salto no es un párrafo

Si cada bloque tiene significado propio, crear elementos de párrafo puede ser más adecuado que una cadena con muchos saltos. Para código o logs, un elemento pre puede conservar formato, siempre asignando el contenido como texto. Elige la estructura por lo que debe leer la persona y prueba la salida en su contexto final: ver dos líneas en una consola no demuestra que el HTML las vaya a mostrar igual.

Referencia 1

Referencia 2

Referencia 3