I tried making a web page by writing
document.write("This is the first line \n And this is the second");
The desired effect is:
This is the first line
And this is the second
But I get this:
This is the first line And this is the second
I tried writing <br> inside and it worked. But Why writing an escape \n didn't? Anything I am doing wrong? I am using Firefox.
You are not doing anything wrong. Its just the \n character is valid in text related elements like, alert() and <textarea>.
The document.write() command writes to the body of the site or the display (in the HTML). Substitute <br> in place of the \n here since you are writing HTML in the page
instead of \n you have to use <br/>, so that the browser understands it
document.write("This is the first line <br/> And this is the second");
You use the <pre> tags for things like \n, and <br/> for ordinary HTML.
http://jsfiddle.net/FxpcA/
document.write("<pre>This is the first line \n And this is the second</pre>");
Related
I have a textarea in React that also accepts newLine characters. It is correctly stored in mongoDB with the newLine characters. When I retrieve it back to React and try to display it in table <td>, it shows with spaces. But if I put it on console, it is correctly shown. I guess that is because in HTML newline character is <br >. How can I do this?
I tried replacing '\n' with <br> using replace(), but then <br> gets concatenated as a string literal.
"items" shown in mongoDB
How its displayed in table
Correctly shown in console
Code
As MrBens suggested, the simplest solution is to use the pre (preformatted text) tag. For example:
<td><pre>This is
two lines</pre></td>
Would result in:
This is
two lines
There's also a similar CSS style, whitespace: pre or whitespace: pre-wrap. The MDN has details about that also.
I have tag like <span style="font-size:10.5pt;\nfont-family:\nKaiTi"> and I want to replace \n within tag with empty character.
Note: Tag could be anything(not fixed)
I want regex expression to replace the same in the javascript.
You should be able to strip out the \n character before applying this HTML to the page.
Having said that, try this (\\n)
You can see it here: regex101
Edit: A bit of refinement and I have this (\W\\n). It works with the example you provided. It breaks down if you have spaces in the body of the tags (<span> \n </span>).
I've tried everything I know to do. Perhaps someone with more regex experience can assist?
I am using String.fromCharCode to add new line (or) carriage return to my html text.
It is like,
"Ant the other line here..." + String.fromCharCode(13)
Jsfiddle is #http://jsfiddle.net/udmfsvfn/
But, no newline characters are added in the page!!
If you want a line break in HTML you need to supply <br> entity instead of a line break (your String.fromCharCode(13) code) since HTML interprets line breaks as usual spaces in text.
The reason that a newline character is not forcing a new line, is that in HTML a newline character doesnt do anything and is ignored.
In order to force text onto a new line, you will need to add the appropriate HTML tag, such as <BR> or put your text inside paragraphs <p>.
See the updated fiddle.
String.fromCharCode(10);
with CSS
white-space: pre-line;
Here si working example:
https://jsfiddle.net/Nxja/3xtcqdej/1/
I have this code:
elf='%0A';
document.getElementById('writebox').innerHTML=("hello there"+elf+"friend");
When the function that this is inside is called, the text that appears in the div is not a line break, but rather just "%0a". This confuses me, because inside another different function, elf works fine. Any ideas why?
Different encoding. %0A is URL-encoding of a newline, which you would use in (obviously) URLs. &x0a; would be the HTML-encoding of the same character that you would use in HTML, but it doesn't work, for a variety of reasons. To break a line in HTML, you can use <br> tag.
EDIT:
the problem wit a <br /> tag is that all i want is simply a new line. <br /> creates WAY too much white space
No, it doesn't:
foo<br>
bar
I am going through the example given in JavaScript The Complete Reference 3rd Edition.
The O/P can be seen here, given by the author.
<body>
<h1>Standard Whitespace Handling</h1>
<script>
// STRINGS AND (X)HTML
document.write("Welcome to JavaScript strings.\n");
document.write("This example illustrates nested quotes 'like this.'\n");
document.write("Note how newlines (\\n's) and ");
document.write("escape sequences are used.\n");
document.write("You might wonder, \"Will this nested quoting work?\"");
document.write(" It will.\n");
document.write("Here's an example of some formatted data:\n\n");
document.write("\tCode\tValue\n");
document.write("\t\\n\tnewline\n");
document.write("\t\\\\\tbackslash\n");
document.write("\t\\\"\tdouble quote\n\n");
</script>
<h1>Preserved Whitespace</h1>
<pre>
<script> // in Eclipse IDE, at this line invalid location of tag(script)
// STRINGS AND (X)HTML
document.write("Welcome to JavaScript strings.\n");
document.write("This example illustrates nested quotes 'like this.'\n");
document.write("Note how newlines (\\n's) and ");
document.write("escape sequences are used.\n");
document.write("You might wonder, \"Will this nested quoting work?\"");
document.write(" It will.\n");
document.write("Here's an example of some formatted data:\n\n");
document.write("\tCode\tValue\n");
document.write("\t\\n\tnewline\n");
document.write("\t\\\\\tbackslash\n");
document.write("\t\\\"\tdouble quote\n\n");
</script>
</pre>
</body>
(X)HTML automatically “collapses” multiple whitespace characters down to one whitespace. So, for example, including multiple consecutive tabs in your HTML shows up as only one space character. In this example, the pre tag is used to tell the browser that the
text is preformatted and that it should not collapse the white space inside of it. Similarly, we could use the CSS white-space property to modify standard white space handling. Using pre allows the tabs in the example to be displayed correctly in the output.
So, how to get rid of this warning and do i really need to have a concern for this? I think i am missing something as i have the intuition of the authors not being wrong?
There is nothing wrong in having script inside pre tag. It is just Eclipse IDE validation issue. If you use this html in the browser everything works fine and no warnings are displayed.
Also, if you wanted to show script tag as 'text content' inside pre tag, then have a look at this question: script in pre