Javascript String With New Line - But Not Using \N

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.";

What is the JavaScript string newline character?

I've just tested a few browsers using this silly bit of JavaScript:

function log_newline(msg, test_value) {  if (!test_value) {     test_value = document.getElementById('test').value;  }  console.log(msg + ': ' + (test_value.match(/\r/) ? 'CR' : '')              + ' ' + (test_value.match(/\n/) ? 'LF' : ''));}
log_newline('HTML source');log_newline('JS string', "foo\nbar");log_newline('JS template literal', `barbaz`);

<textarea id="test" name="test">
</textarea>

\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>;

Insert newline character in string javascript

innerHTML

What happens if you put a new line character in HTML source code?

NewLine!

Why does \n sometimes act as a space in javascript instead of a new line character?

The JavaScript is irrelevant. Any group of whitespace in HTML, except under certain circumstances (such as being in a <pre> element) is treated as a single space.

<p>Hello,      World</p>

NewLine escape character not working

This has nothing to do with JavaScript. In HTML, all whitespace (including newlines) is collapsed and treated as a single space.

To do a line break in HTML:

Use <br>
Or organize your text into paragraphs with <p>...</p>, etc.)
Or if you're outputting some form of formatted text (like code), you can do that in a <pre>...</pre> element (or any element with the white-space: pre, white-space: pre-wrap, or white-space: pre-line style applied to it).

Sending newline character in Javascript string

If you're trying to catch it with RegEx, or something similar, that will still catch \n even if it displays as two lines. If you must have it as a literal, you can escape the backslash.

E.g.

var str = "Result1\\nResult2";

Here's a bit of a visual example using the RegEx search in Atom.

The highlighted part is the selection. As you can see, a new line character is selected when performing a RegEx search using \n, regardless of if it's actually shown as \n.

Javascript String With New Line - But Not Using \N