0

I have a problem breaking down 1 line using <br />, I have converted to string but it doesn't work. I have followed this https://stackoverflow.com/questions/63574937/how-to-convert-html-string-into-plain-text-in-react answer to follow edit, it still doesn't work.

This intl.formatMessage({ id: "AUTH.LOGIN.DESCRIPTION.1" }) is System may takes some time to generate the email. Kindly login when you had received the email. <br /> Thank you for your understanding and apologise for the inconvenience caused.


const htmlFormatMessage = intl.formatMessage({ id: "AUTH.LOGIN.DESCRIPTION.1" });
const htmlString = htmlFormatMessage;
const plainString = htmlString.replace(/<br\/>/gi, '\n');

<p className="text-muted font-weight-bold">
   {plainString}
</p>

Now my result is shown below:

img1

I want the actual result to be shown below:

img2

Arnav Thorat
  • 3,078
  • 3
  • 8
  • 33
Fatt Sky
  • 650
  • 3
  • 11
  • Typo: Your regular expression is missing the space between the `br` and the `/` that exists in the HTML. – Quentin May 13 '22 at 08:36
  • You can use [Dangerously Set innerHTML](https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html). Important that you are sure your string comes from a trusted source – S.Visser May 13 '22 at 08:36
  • @Quentin Can you write down which I get missing? – Fatt Sky May 13 '22 at 08:42
  • 1
    You are missing a space. – Quentin May 13 '22 at 08:43
  • @FattSky a space. The code has `
    ` you're matching only `
    `     – VLAZ May 13 '22 at 08:44
  • @Quentin Like this right? const plainString = htmlString.replace(/
    /gi, '\n');     – Fatt Sky May 13 '22 at 08:53
  • Now you're escaping the space, but not escaping the `/` so that won't even compile. – Quentin May 13 '22 at 08:53
  • Can you show me how? Sorry, I am not really clear – Fatt Sky May 13 '22 at 08:54
  • `htmlString.replace(/
    ]+>/gi, '\n')` should do the trick, it matches any content inside your `
    `, it could have a class or spaces     – savageGoat May 13 '22 at 08:55
  • @savageGoat Thanks for your commet. I tried your code, but why cannot jump in the next line? – Fatt Sky May 13 '22 at 08:57
  • It doesn't break the line because break line in text `\n` don't apply unless the CSS tells to apply them, you could use `white-space: pre-line` or parse your text and splitting it to replace your `<br />` text (which is why you have `
    ` in your text) into a proper `
    ` DOM element. React does that do avoid HTML injections     – savageGoat May 13 '22 at 09:02
  • 1
    Alternatively, if you are 100% sure your code is safe, you could use React's property `dangerouslySetInnerHTML`, more here: https://stackoverflow.com/questions/37337289/react-js-set-innerhtml-vs-dangerouslysetinnerhtml – savageGoat May 13 '22 at 09:03
  • @savageGoat I use this `dangerouslySetInnerHTML` to make it like this `
    ` still cannot work     – Fatt Sky May 13 '22 at 09:10
  • My bad, then I guess you could make it double `htmlString.replace(/
    ]+>/gi, '\n\n')` to display not only a break line but an empty line following your break (having your CSS with `white-space: pre-line;`)     – savageGoat May 13 '22 at 09:14
  • @savageGoat I use your method to edit like this `const plainString = htmlString.replace(/
    ]+>/gi, '\n\n');` still cannot jump to next line     – Fatt Sky May 13 '22 at 09:17
  • Are you sure your element has the CSS property `white-space: pre-line`? Otherwise you could have a thousand line breaks, HTML will still hide them – savageGoat May 13 '22 at 09:21

0 Answers0