I am getting a dynamic text from DB via an API call in following format
Test 1<br>Test 2<br>Test 3
How can I break this string where there is a 'br' tag and add line breaks? I need to show the string in below format
Test 1
Test 2
Test 3
Can someone please shed some light.
UPDATE: Tried below code, space is being added instead of new line
gridData.STATUSNOTES = gridData.STATUSNOTES.replaceAll('<br>', '\n');
CodePudding user response:
Using "br"
You can simply append the text using innerHTML like:
var content = "Test 1<br>Test 2<br>Test 3"
document.getElementById("result").innerHTML = content
<div id="result"></div>
Using "div"
If it doesn't work, in any case like the parent element doesn't permit, you can make use of div
or any element with display
property as block
as block-level element always starts on a new line and always takes up the full width available. Here's an example of converting your string to be placed in new lines:
var content = "Test 1<br>Test 2<br>Test 3"
var result = "";
content.split("<br>").map(element => result = `<div>${element}</div>`)
document.getElementById("result").innerHTML = result
<div id="result"></div>
UPDATE using "\n" as suggested that OP did not provide whether this is HTML
To do nothing with the HTML but just add a line break in a text, you can replace all br
with \n
const content = 'Test 1<br>Test 2<br>Test 3'.replaceAll('<br>', '\n');
console.log(content);
Update 2 using CSS
If you are looking to use \n
as a line break stuff, probably you can use a CSS style white-space: pre-line
. This is a CSS way of breaking lines using \n
. Hope this helps.
var content = "Test 1<br>Test 2<br>Test 3".replaceAll("<br>","\n")
document.getElementById("result").innerHTML = content
<div id="result" style="white-space: pre-line;"></div>
CodePudding user response:
Just replace <br>
with end-of-line code:
const str = 'Test 1<br>Test 2<br>Test 3';
const result = str.replaceAll('<br>', '\n');
console.log(result);
// Test 1
// Test 2
// Test 3