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

If   is the only text that is inside the string, and you don't have HTML that need to be parsed you can use string.replaceAll(' ', '\n') or string.replace(/ /g, '\n'). No need to parse as HTML with the DOM where simple replace will do the job. — jcubic
– jcubic, Commented Dec 16, 2021 at 8:14

Deepak · Accepted Answer · 2021-12-16 11:43:34Z

3

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>

edited Dec 16, 2021 at 11:43

answered Dec 16, 2021 at 7:39

Deepak

2,7522 gold badges13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jcubic Over a year ago

I don't think it's good idea, what about if data contain XSS payload it will be just executed. It make no sense to parse HTML and add to DOM if the input only has  . OP didn't said anything that the input is HTML.

vamsi Over a year ago

'\n' is adding a space instead of breaking the line. I am not sure why

vamsi Over a year ago

and I cannot use innerHTML as there is no static parent element, and everything is dynamically generated as it is a grid

Deepak Over a year ago

How are you using this string? Are you seeing such space in console? Or inside a tag like p tag?

vamsi Over a year ago

Accepted this answer as I was able to make it work using the CSS way. Thanks.

|

A1exandr Belan · Accepted Answer · 2021-12-16 10:44:19Z

0

Just replace   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

edited Dec 16, 2021 at 10:44

answered Dec 16, 2021 at 7:48

A1exandr Belan

4,7803 gold badges30 silver badges53 bronze badges

1 Comment

jcubic Over a year ago

If the input text is not html and only has   as separator, then this is the right answer.

Collectives™ on Stack Overflow

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

2 Answers 2

Using "br"

Using "div"

UPDATE using "\n" as suggested that OP did not provide whether this is HTML

Update 2 using CSS

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Using "br"

Using "div"

UPDATE using "\n" as suggested that OP did not provide whether this is HTML

Update 2 using CSS

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related