Question

我预先格式化了包含换行符和多空格的字符串，我想将它们附加到文本节点中。

<pre id="bar"></pre>

<script>
   var string = "Preformatted"
                + "\n"  // \r, \r\n, \n\r or what else?
                + "multispace     string";
   var text = document.createTextNode(string);
   document.getElementById('bar').appendChild(text);
</script>

我试图采用线路断路器：

\n在所有浏览器中打破了行，但在IE中（我在7上测试）变成了空格
\r仅在IE中打破行
\r\n适用于所有浏览器，但在IE中，第二行开头的空间是恐怖
\n\r也可以，但在IE中，第一行末尾的空间对我的布局来说是不可接受的。

我无法使用<br>和innerHTML，因为IE会折叠多个空格 jQuery .text(string)与.appendChild(createTextNode(string))

具有完全相同的行为

如何插入跨浏览器换行符？
最终，如何轻松检测浏览器是否支持\n或\r？

Answer 1

这似乎适用于我测试的所有浏览器（safari，opera，chrome，firefox，ie7，ie8，ie9）：

http://jsfiddle.net/4bQ5Q/1/

代码：

var textarea = document.createElement("textarea");
textarea.value = "\n";
var eol = textarea.value.replace(/\r\n/, "\r");

var string = "Preformatted" + eol + "multispace     string";

var text = document.createTextNode(string);
document.getElementById('bar').appendChild(text);

Answer 2

由于IE似乎很奇怪，可能会将字符存储在变量中，并使用conditional comments根据需要进行更改：

<script> var $LF = '\n'; </script>
<!--[if lt IE 8]>
    <script> $LF = '\r'; </script>
<![endif]-->

<script>
  var string = "Preformatted"
               + $LF
               + "multispace     string";
  var text = document.createTextNode(string);
  document.getElementById('bar').appendChild(text);
</script>

您的代码段似乎在IE8中正确显示，因此lt IE 8条件。

Answer 3

同时我找到了一个更简单的解决方案，似乎是跨浏览器：
innerHTML有一个粗暴的<pre>拼版

<div id="bar"></div>

<script>
  var string = "Preformatted \n"
             + "string \r"
             + "with \r\n"
             + "assorted \n\r"
             + "line   breaks";
  document.getElementById('bar').innerHTML = "<pre>"+string+"</pre>";
</script>

\r\n成为单一回报 \n\r双重回复

不完美：IE 10兼容模式7在最后一行末尾添加一个空格。

带有跨浏览器换行符的Javascript预格式化文本

3 个答案: