Split a string with HTML tag into multiline string

Question

I've a string that contains html break tag to split the string as I would like to split the string into multiple lines but it doesn't seem to render the string as multi-line in UI. How can I achieve the following?

testString = "This is line one This is line two This is line three"

Expected Output:

This is line one
This is line two
This is line three

I read about dangerouslysettinginnerHTML but don't want to use it in my code. As far as split is concerned what I did was I tried

text.split('<br>').map(each => each + <br>)

but that didn't work. Any hint or help would be appreciated.

"but it doesn't seem to render the string as multi-line in UI." - what UI? A browser will render separate lines as a single line unless they contain or . — Dave Pritlove
– Dave Pritlove, Commented May 19, 2022 at 23:04
I understand your problem but but what exactly did you do that didn't work? — Cameron
– Cameron, Commented May 19, 2022 at 23:04
Generally speaking, the easiest way to do this with React is probably use dangerouslysetinnerHTML, but that's not a best practice. It's better to use javascript to split the string and then map the results while appending a br tag after each output — Cameron
– Cameron, Commented May 19, 2022 at 23:08
Yes I read about dangerouslysettinginnerHTML but don't want to use it in my code. As far as split is concerned what I did was I tried text.split(' ').map(each => each + ) — Alex
– Alex, Commented May 19, 2022 at 23:13
A hint for future posts... code belongs in your question, not the comments. — Phil
– Phil, Commented May 19, 2022 at 23:30

Phil · Accepted Answer · 2022-05-19 23:34:52Z

1

The easiest way to do this outside of dangerouslySetInnerHTML is split and flat-map the string to an array of JSX elements.

{testString
  .split(/<br ?\/?>/)
  .flatMap((line, i) => [line, <br key={`line-${i}`} />])}

The regex delimiter is designed to split on any form of  ,   or  .

edited May 19, 2022 at 23:34

answered May 19, 2022 at 23:19

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Collectives™ on Stack Overflow

Split a string with HTML <br> tag into multiline string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related