Break the line in a concatenated string based on a matching criteria and add line breaks

Question

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');

Answer 1

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>