为什么 JavaScript 换行符在 HTML 中不起作用？
[英]Why doesn’t JavaScript newlines work inside HTML?
问题描述
I have the following:
我有以下内容：
<html>
<body>
<script type="text/javascript">
document.write('Hello\nWorld')
</script>
</body>
</html>
As you probably all know, \n doesn't work and I have to use <br> instead.您可能都知道， \n不起作用，我必须改用<br> 。 It won't work either if I link to an external .js file.如果我链接到外部.js文件，它也不会起作用。 Here are my questions:这是我的问题：
- Why doesn't
\nwork?为什么\n不起作用？ - Why does
<br>even work?为什么<br>甚至可以工作？ Shouldn't everything that's inside the script tags be strictly JavaScript instead of a dirty mix between HTML and JS?脚本标签内的所有内容不应该严格为 JavaScript 而不是 HTML 和 JS 之间的肮脏混合吗？ - Is it possible to make
\nwork somehow?是否有可能使\n以某种方式工作？ - I know
\tdoesn't work either.我知道\t也不起作用。 Any other stuff that won't work inside HTML files?还有其他在 HTML 文件中不起作用的东西吗？ - Unrelated question (I didn't want to open a new question just for this): I installed Node.js to be able to try out JS scripts from inside vim but when I run this script I get the error "
documentis not defined".不相关的问题（我不想为此打开一个新问题）：我安装了 Node.js 以便能够从 vim 内部试用 JS 脚本但是当我运行这个脚本时我得到错误“ document未定义”。 Same thing happens when I try from the REPL.当我从 REPL 尝试时，同样的事情发生了。 Any ideas?有任何想法吗？
When searching for similar questions, all I got was that I should use <br> instead of \n .在搜索类似问题时，我得到的只是我应该使用<br>而不是\n 。
13 个解决方案
解决方案1
18 2011-04-25 19:52:31
Why doesn't
\\nwork?\\n不起作用？
Because white space is just white space in HTML.因为空白只是 HTML 中的空白。
Why does
<br>even work?<br>甚至可以工作？
Because it is the HTML for a line break因为它是换行符的 HTML
Shouldn't everything that's inside the script tags be strictly JavaScript instead of a dirty mix between HTML and JS?
That's subjective.那是主观的。 document.write is considered dirty by many as well.许多人也认为document.write很脏。
You can always use createElement and createTextNode您始终可以使用createElement和createTextNode
Is it possible to make
\\nwork somehow?\\n工作？
<pre> , white-space <pre> , white-space
I know
\\tdoesn't work either.\\t也不起作用。 Any other stuff that won't work inside HTML files?
HTML is not plain text. HTML 不是纯文本。 Listing all the differences would be time-consuming, and out of scope for Stack Overflow.列出所有差异将非常耗时，并且超出 Stack Overflow 的范围。 Try reading the specification.尝试阅读规范。
Unrelated question (I didn't want to open a new question just for this)
It is completely unrelated.它是完全不相关的。 Open a new question.打开一个新问题。
解决方案2
12 2020-07-26 12:44:54
I had:我有：
<div>Hello\nworld</div>
I added the below css to div class and it's working now:我将下面的 css 添加到div类，现在它正在工作：
div {
white-space: pre-wrap;
}
I hope this solve your problem too.我希望这也能解决你的问题。
解决方案3
9 已采纳 2011-04-25 19:48:22
\\n works. \\n有效。 If you have a debugger of sorts (or similar developer tool), you can see the document source, and you will see that there is indeed a newline character.如果您有各种调试器（或类似的开发人员工具），您可以查看文档源，并且您会看到确实有换行符。 The problem is the way you are looking at the page: you're not reading its source, you're reading it as an HTML document.问题在于您查看页面的方式：您不是在阅读其源代码，而是将其作为 HTML 文档阅读。 Whitespace in HTML is collapsed into a single space. HTML 中的空白被折叠成一个空格。 So when you change the source, it does indeed change, although when interpreted as an HTML document, that change isn't shown.因此，当您更改源时，它确实会发生变化，尽管当解释为 HTML 文档时，该更改不会显示。
Your Node.js error is most probably caused by the fact that you're running browser scripts on the server.您的 Node.js 错误很可能是由于您在服务器上运行浏览器脚本造成的。 Ie scripts that refer to the document are intended to be run in a browser, where there is a DOM etc. Although a generic node process doesn't have such a global object because it isn't a browser.即引用document脚本旨在在浏览器中运行，其中有一个 DOM 等。虽然通用节点进程没有这样的全局对象，因为它不是浏览器。 As such, when you try and run code that references a global object called document on the assumption that it exists just like in the browser, it will throw an error.因此，当您尝试运行引用名为document的全局对象的代码时，假设它就像在浏览器中一样存在，它将抛出错误。 document.write doesn't exist; document.write不存在； if you want to write to the screen, try console.log or look into the other util functions.如果您想写入屏幕，请尝试使用console.log或查看其他 util 函数。
解决方案4
4 2011-04-25 19:42:30
When HTML renders, it ignores whitespace.当 HTML 呈现时，它会忽略空格。 Thus the only way is to use line breaks.因此，唯一的方法是使用换行符。
Use <br/> instead of \\n and it will work fine使用<br/>而不是\\n它将工作正常
The document.write() function writes HTML into the element. document.write()函数将 HTML 写入元素。
解决方案5
3 2018-08-18 22:13:39
在 html 上使用<pre></pre> ，它将尊重来自 JS 的文本格式。
解决方案6
2 2011-04-25 19:41:19
When you write to the page, you're not writing JavaScript;当您写入页面时，您不是在编写 JavaScript； you're writing HTML.您正在编写 HTML。 \\n is a special "line feed" character that doesn't create a line break in the browser's rendering of the HTML. \\n 是一个特殊的“换行”字符，它不会在浏览器呈现 HTML 时创建换行符。 It WILL create a line break in the HTML file itself, but the browser doesn't take this into consideration when it renders out the markup.它会在 HTML 文件本身中创建一个换行符，但浏览器在呈现标记时不会考虑这一点。
Thus, the br tag is required.因此，需要 br 标签。
解决方案7
2 2011-04-25 19:41:30
Use the html tag <br/> to input line endings (your output is interpreted by an html parser), for example:使用 html 标签<br/>输入行结尾（您的输出由 html 解析器解释），例如：
Javascript: Javascript：
document.write("Hello<br/>World");
解决方案8
0 2011-04-25 19:42:28
Whitespace emitted by JavaScript works like any other whitespace in your HTML file. JavaScript 发出的空格与 HTML 文件中的任何其他空格一样。 That seems the expected behavior to me.这对我来说似乎是预期的行为。
解决方案9
0 2011-04-25 19:44:57
1) \\n works in plain text files. 1) \\n在纯文本文件中工作。
2) <br /> works because you are doing HTML in string. 2) <br />有效，因为您在字符串中执行 HTML。 Strings can hold characters without breaking the rest of the JS script.字符串可以保存字符而不会破坏 JS 脚本的其余部分。
3) Not really. 3) 不是真的。 Perhaps when you are using <textarea> s.也许当您使用<textarea> 。
4) Most other \\* 's 4) 大多数其他\\*的
5) More info needed. 5）需要更多信息。
解决方案10
0 2011-04-25 19:49:53
1,3. 1,3。 "\\n" does work. "\\n" 确实有效。 If you do a document.write inside the body tag you can check document.body.innerHTML and see that the line break is indeed there.如果您在 body 标签内执行 document.write，您可以检查 document.body.innerHTML 并查看是否确实存在换行符。
4.Anything HTML specific will be rendered HTML specific, so you will have to escape < and > into < 4.任何特定于 HTML 的内容都将呈现特定于 HTML 的内容，因此您必须将<和>转义为< and >和> for instance.例如。
5. document is an object available in browsers, it is not used in node since the DOM doesn't exist there. 5. document是一个在浏览器中可用的对象，它没有在 node 中使用，因为那里不存在 DOM。 require("sys"); and use sys.print in nodejs.并在 nodejs 中使用 sys.print。
解决方案11
0 2011-04-25 19:50:02
The document object represents an HTML document; document对象代表一个 HTML 文档； any text written to the document will be processed by the browser's HTML renderer.写入文档的任何文本都将由浏览器的 HTML 渲染器处理。 In HTML, all adjacent whitespace, including line breaks (eg, "\\n" ), are collapsed into a single space when rendered.在 HTML 中，所有相邻的空格，包括换行符（例如， "\\n" ），在渲染时都会折叠成一个空格。 This is why you need <br /> , which is rendered as a line break.这就是为什么你需要<br /> ，它被呈现为一个换行符。 You can make \\n work by replacing it with <br /> or by writing into a <pre> element:您可以通过用<br />替换它或写入<pre>元素来使\\n工作：
Hello World
解决方案12
0 2022-09-24 22:16:12
short answer:简短的回答：
if you view the source code you'll see that the \n did worked BUT the HTML would skip the any white space more than just one.如果您查看源代码，您会发现\n确实有效，但 HTML 会跳过任何空格，而不仅仅是一个。 to get the new line you can either use <pre> or <br />要获得新行，您可以使用<pre>或<br />
解决方案13
-1 2011-04-25 19:51:25
Actually your code is works.其实你的代码是有效的。 When you run it on browser console like Firefox, it will show you:当您在 Firefox 等浏览器控制台上运行它时，它会显示：
<html><head></head><body>
<script type="text/javascript">
document.write('Hello\nWorld')
</script>Hello
World
</body></html>
Note on the Hello and World that is separated.注意分开的 Hello 和 World。
But when displayed on HTML, line break (whitespace) will be ommited.但是当在 HTML 上显示时，将省略换行符（空格）。
To display "as is", you may surround the javascript with PRE tag, like:要“按原样”显示，您可以使用 PRE 标记将 javascript 括起来，例如：
<html>
<body>
<pre>
<script type="text/javascript">
document.write('Hello\nWorld')
</script>
</pre>
</body>
</html>
You will get your line break displayed on HTML.您将在 HTML 上显示换行符。
解决方案14
-1 2011-04-25 21:16:23
Everyone has said what it was to be said but in case if you are using firebug/chrome Javascript console ..then try this >每个人都说过要说的话，但如果您使用的是 firebug/chrome Javascript 控制台 ..然后试试这个 >
console.log("Hello\\nWorld");
This is the key difference.这是关键的区别。 When you are printing something in HTML, the HTML rules apply.当您在 HTML 中打印某些内容时，HTML 规则适用。 Elsewhere you can see the line breaks work.在其他地方，您可以看到换行符起作用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.