Estoy tratando de usar una cadena recuperada de firebase firestore y mostrarla en mi página HTML con saltos de línea.
En la tienda, tengo una cadena que se ve así
fila1\nfila2\nfila3
Cuando lo recupero e intento agregarlo a mi página, los \n no se registran como saltos de línea. Estoy usando pre-envoltura y usando una cadena de prueba funciona bien.
let text = getString(); //retrieves a string from firebase document.getElementById('textBox').textContent = text;Muestra esto en mi página:
fila1\nfila2\nfila3
El siguiente código de prueba:
let text = 'row1\nrow2\nrow3'; document.getElementById('textBox').textContent = text;Muestra lo siguiente en la página:
fila1
fila2
fila3
Por lo tanto, parece que los \n en la cadena recuperada de la base de datos no se leen de la misma manera que los \n que se colocan dentro de la cadena definida directamente en el código Javascript. ¿Alguna idea de por qué? ¿Y qué puedo hacer para que lea los saltos de línea?
Similar a lo que dijo @user14063792468 en su comentario, parece que sus caracteres de nueva línea se han escapado (es decir, se convierte \n en \\n ) cuando se almacena una cadena, por lo que intentaría reemplazar cualquier instancia de \\n con \n (barra invertida simple) y vea si eso funciona.
Aquí hay un ejemplo de cómo se vería esto antes y después del reemplazo:
let string = 'Newline characters\\nare in this\\nstring\\nfor sure'; // note the double slashes document.getElementById('before').textContent = string; let text = string.replace(/\\n/g, "\n"); document.getElementById('after').textContent = text; <pre id="before"></pre> <pre id="after"></pre>