New Line '\N' Is Not Working in Typescript

New Line '\n' is not working in Typescript

\n does not cause a line break in html.

You'll need to use a <br/> or wrap your text in a block element.

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

Or

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

Typescript - Creating New Lines in a string using \n

You need to convert the string by replacing all the \n with <br> tags. And then you need to bind it as HTML instead of string.

Example:

str: String = "First ordered list item\n2. Another item\n * Unordered sub-list.\n"

//Replace \n with <br>
this.str.replace("\n", "<br>");

Now in your template instead of doing this:

<div>{{str}}</div

You need to do this

<div [innerHTML]="str"></div>

By binding it to innerHTML, you are treating your string as html. Hence the br tags will be processed.

Hope this helps.

TypeScript - How to append line break (\n) on string?

If you rendering to HTML, you will want to use the HTML tag for a newline :

The string Hello\n\nTest in your source will look like this:

Hello!

Test

The string Hello<br><br>Test will look like this in HTML source:

Hello<br><br>Test

Try this :

var msg: string = "";
msg += "- Campo NOME é obrigatório";
msg += "<br/>- Campo EMAIL é obrigatório";

Here is fiddle : https://jsfiddle.net/9fuxgbms/1/

How to add new line in string in Typescript - Angular 8

you need to use the "\n" rather than "/n"

\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.Fragment key={line}>{line}<br/></React.Fragment>)}
</div>;

(We can't use the shorthand <>___</> form because they don't support keys.)

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.Fragment key={line}>{line}<br/></React.Fragment>)}
</div>;

JavaScript string with new line - but not using \n

The reason it is not working is because javascript strings must be terminated before the next newline character (not a \n obviously). The reason \n exists is to allow developers an easy way to put the newline character (ASCII: 10) into their strings.

When you have a string which looks like this:

//Note lack of terminating double quote
var foo = "Bob 

Your code will have a syntax error at that point and cease to run.

If you wish to have a string which spans multiple lines, you may insert a backslash character '\' just before you terminate the line, like so:

//Perfectly valid code
var foo = "Bob \
is \
cool.";

However that string will not contain \n characters in the positions where the string was broken into separate lines. The only way to insert a newline into a string is to insert a character with a value of 10, the easiest way of which is the \n escape character.

var foo = "Bob\nis\ncool.";

Why can't I replace a newline Char with Typescript (Javascript)

Try with this:

let content1 = content.replace(/\r\n/g, "<br />");
let content2 = content1.replace(/\n\r/g, "<br />");
let content3 = content2.replace(/\n/g, "<br />");
let content4 = content3.replace(/\r/g, "<br />");

Your problem is that .replace function replaces just the first occurrence unless you pass a regex with the global flag.

---

Related Topics