7

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

<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？

4

3 回答 3

7

这似乎适用于我测试的所有浏览器（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);​
于 2012-06-04T19:53:54.173 回答
4

由于 IE 看​​起来很奇怪，也许将字符存储在一个变量中，并根据需要使用条件注释来更改它：

<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条件。

于 2012-06-04T19:39:26.503 回答
2

与此同时，我发现了一个似乎是跨浏览器的更简单的解决方案：
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 在最后一行末尾添加一个空格。

于 2012-06-06T10:14:17.857 回答