Line Break in HTML With '\N'

Line break in HTML with '\n'

This is to show new line and return carriage in HTML, then you don't need to do it explicitly. You can do it in CSS by setting the white-space attribute pre-line value.

<span style="white-space: pre-line">@Model.CommentText</span>

what's the different between br and \n as line break

\n is a linebreak character. It is interpreted like that by the JS compiler. The HTML parsers on the other hand treat it as a normal string.

<br> in html is a tag to introduce a line break. In JS strings, this is treated as a normal string.

Convert \n line breaks to HTML BR line breaks

You are trying to use a string method on an object, not on property values within that object.

There is no Object.replace() so that will throw error

Similarly undefined.replace() will also cause error

Presumably you only have to fix a few property values but first it is necessary to make sure those values are defined and are strings before using replace()

Try

function convertBreak(str){
   if(!str){
     return ''; // don't want `undefined` printing into page
   }
   // if it's something other than string, return it as is
   if( typeof str !=== 'string'){
      return str;
   }else{
     return str.replace(/\n/g, "<br />")
    }
}

incident.Description = convertBreak(incident.Description);

\n is not rendering the text in new line

\n isn't a newline in HTML, it's just a space. Any series of whitespace characters in HTML is treated as one space.

The React part of this is how you use br elements to do what you want to do.

The easiest way is to tell the div to treat whitespace different, as discussed in this question's answers.

return <div style={{whiteSpace: "pre-line"}}>
    {item.intro}
</div>;

Or you could wrap the lines with an element, such as a div or p:

return <div>
    {item.intro.split(/\n/).map(line => <div key={line}>{line}</div>)}
</div>;

Or if you want br elements between the lines, you can use fragments:

return <div>
    {item.intro.split(/\n/).map(line => <React.Frgament key={line}>{line}<br/></React.Fragment>)}
</div>;

...but I don't like that last one as it ends with a <br/>. You can fix that, but it's more complicated:

return <div>
    {item.intro.split(/\n/).map((line, index) => index === 0 ? line : <React.Frgament key={line}>{line}<br/></React.Frgament>)}
</div>;

convert new line /n to a line break in angular

This does not replace it, but you can use the CSS attribute white-space: pre-line; to render the \n in the browser:
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

div {  white-space: pre-line;}

<div>Foo   Bar       Baz     Foo     Bar 

       Baz</div>

<Text>
Hi~{"\n"}
this is a test message.
</Text>

    <textarea cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>

this.includeValues += this.merId + ',' + this.explodeStatus + '<br/>';
this.excludeValues += this.merId + ',' + this.explodeStatus + '<br/>';

this.includeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';
this.excludeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';