I'm trying to use a string retrieved from firebase firestore and display it on my HTML page with line breaks.
In the store, I have a string that looks like this
row1\nrow2\nrow3
When I retrieve it and try to add it to my page the \n's do not register as line breaks. I am using pre-wrap and using a test-string works fine.
let text = getString(); //retrieves a string from firebase
document.getElementById('textBox').textContent = text;
Shows this on my page:
row1\nrow2\nrow3
The following test code:
let text = 'row1\nrow2\nrow3';
document.getElementById('textBox').textContent = text;
Shows the following on the page:
row1
row2
row3
So it seems like the \n's in the string retrieved from the database are not read the same way as the \n's that are put inside the string defined directly in the Javascript code. Any idea why? And what can I do to make it read the line breaks?
Similar to what @user14063792468 said in their comment, it appears your newline characters have been escaped (i.e., converts \n to \\n) when a string is stored, so I'd try to replace any instances of \\n with \n (single backslash) and see if that works.
Here's an example of how this might look before and after the replacement:
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>