为什么 JavaScript 换行符在 HTML 中不起作用？答案

【问题标题】：Why doesn’t JavaScript newlines work inside HTML?为什么 JavaScript 换行符在 HTML 中不起作用？
【发布时间】：2011-08-12 13:11:34
【问题描述】：

我有以下几点：

<html>
  <body>
    <script type="text/javascript">
      document.write('Hello\nWorld')
    </script>
  </body>
</html>

大家可能都知道，\n 不起作用，我必须改用 。如果我链接到外部 .js 文件，它也不起作用。以下是我的问题：

为什么\n 不起作用？
为什么  甚至可以工作？脚本标签中的所有内容不应该是严格的 JavaScript，而不是 HTML 和 JS 之间的肮脏混合吗？
是否可以让\n 以某种方式工作？
我知道\t 也不起作用。还有其他不能在 HTML 文件中使用的东西吗？
不相关的问题（我不想为此打开一个新问题）：我安装了 Node.js 以便能够从 vim 内部尝试 JS 脚本，但是当我运行此脚本时，我收到错误“@987654329 @ 没有定义”。当我从 REPL 尝试时，也会发生同样的事情。有什么想法吗？

在搜索类似问题时，我得到的只是我应该使用  而不是\n。

【问题讨论】：

标签： javascript html text-formatting

【解决方案1】：

为什么\n 不起作用？

因为空白只是 HTML 中的空白。

为什么  甚至可以工作？

因为它是用于换行的 HTML

脚本标签中的所有内容不应该是严格的 JavaScript，而不是 HTML 和 JS 之间的肮脏混合吗？

这是主观的。 document.write 也被许多人认为是肮脏的。

您始终可以使用createElement 和createTextNode

是否有可能使\n 以某种方式工作？

<pre>, white-space

我知道\t 也不起作用。还有其他不能在 HTML 文件中使用的东西吗？

HTML 不是纯文本。列出所有差异将非常耗时，并且超出了 Stack Overflow 的范围。尝试阅读规范。

不相关的问题（我不想为此开一个新问题）

完全不相关。打开一个新问题。

【讨论】：

【解决方案2】：

我有：

<div>Hello\nworld</div>

我将下面的 css 添加到 div 类，它现在可以工作了：

div {
      white-space: pre-wrap;
  }

我希望这也能解决你的问题。

【讨论】：

【解决方案3】：

\n 有效。如果你有一个调试器（或类似的开发工具），你可以看到文档源，你会看到确实有一个换行符。问题在于您查看页面的方式：您没有阅读其源代码，而是将其作为 HTML 文档阅读。 HTML 中的空格被折叠成一个空格。因此，当您更改源代码时，它确实会发生变化，尽管当解释为 HTML 文档时，不会显示这种变化。

您的 Node.js 错误很可能是由您在服务器上运行浏览器脚本引起的。 IE。引用document 的脚本旨在在浏览器中运行，其中存在 DOM 等。尽管通用节点进程没有这样的全局对象，因为它不是浏览器。因此，当您尝试运行引用名为document 的全局对象的代码时，假设它就像在浏览器中一样存在，它将引发错误。 document.write 不存在；如果您想写入屏幕，请尝试console.log 或查看其他实用程序功能。

【讨论】：

【解决方案4】：

当 HTML 呈现时，它会忽略空格。因此，唯一的方法是使用换行符。

使用  代替\n 会正常工作

document.write() 函数将 HTML 写入元素。

【讨论】：

【解决方案5】：

在 html 上使用<pre></pre>，它将尊重 JS 的文本格式。

【讨论】：

【解决方案6】：

当您写入页面时，您并不是在编写 JavaScript；而是在编写 JavaScript。您正在编写 HTML。 \n 是一个特殊的“换行”字符，它不会在浏览器的 HTML 呈现中创建换行符。它会在 HTML 文件本身中创建一个换行符，但浏览器在呈现标记时不会考虑到这一点。

因此，br 标记是必需的。

【讨论】：

【解决方案7】：

使用 html 标签   输入行尾（您的输出由 html 解析器解释），例如：

Javascript：

document.write("Hello<br/>World");

【讨论】：

【解决方案8】：

JavaScript 发出的空格与 HTML 文件中的任何其他空格一样工作。这对我来说似乎是预期的行为。

【讨论】：

【解决方案9】：

1) \n 在纯文本文件中工作。

2)   有效，因为您正在使用字符串中的 HTML。字符串可以保存字符而不会破坏 JS 脚本的其余部分。

3) 不是真的。也许当您使用<textarea>s 时。

4) 大多数其他\*'s

5) 需要更多信息。

【讨论】：

【解决方案10】：

1,3。 "\n" 确实有效。如果您在 body 标记内执行 document.write，您可以检查 document.body.innerHTML 并查看换行符确实存在。

4.任何特定于 HTML 的内容都将呈现为特定于 HTML，因此您必须将 &lt; 和 &gt; 转义为 &lt; 和 &gt;。

5.document 是浏览器中可用的对象，它不用于节点，因为那里不存在 DOM。 require("sys"); 并在 nodejs 中使用 sys.print。

【讨论】：

【解决方案11】：

document 对象代表一个 HTML 文档；写入文档的任何文本都将由浏览器的 HTML 渲染器处理。在 HTML 中，所有相邻的空格，包括换行符（例如，"\n"），在呈现时都会折叠成一个空格。这就是您需要  的原因，它被呈现为换行符。您可以通过将  替换为  或写入<pre> 元素来使\n 工作：

你好
世界

【讨论】：

【解决方案12】：

实际上您的代码是有效的。当您在 Firefox 等浏览器控制台上运行它时，它会显示：

<html><head></head><body>
    <script type="text/javascript">
      document.write('Hello\nWorld')
    </script>Hello
World

</body></html>

注意分开的Hello和World。

但在 HTML 上显示时，会省略换行符（空格）。

要显示“原样”，您可以用 PRE 标记包围 javascript，例如：

<html>
  <body>
    <pre>
    <script type="text/javascript">
      document.write('Hello\nWorld')
    </script>
    </pre>
  </body>
</html>

您将在 HTML 上显示换行符。

【讨论】：

【解决方案13】：

每个人都说过要说的话，但如果你使用的是 firebug/chrome Javascript 控制台..那么试试这个 >

console.log("Hello\nWorld");

这是关键的区别。当您在 HTML 中打印某些内容时，将应用 HTML 规则。在其他地方你可以看到换行符的工作。

【讨论】：