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

【问题标题】：Javascript preformatted text with cross-browser line breaks带有跨浏览器换行符的 Javascript 预格式化文本
【发布时间】：2012-06-08 20:42:44
【问题描述】：

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

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

【问题讨论】：

您似乎没有使用 jQuery，我什至不确定这是否是您要查找的内容，但是您可以正常使用 if ($.browser.msie) { /* handle the \n here */} 和其余的，但是您d 必须使用 jQuery 或转到 jQuery 源并获取 $.browser.msie 的实现并应用相同的检查并以不同于其他浏览器的方式处理它。
现场演示： jsfiddle.net/RMeML/1
@MilkyWayJoe：如果没有 javascript 解决方案，我可以使用 jQuery。

标签： javascript cross-browser line-breaks pre textnode

【解决方案1】：

由于 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>

您的 sn-p 似乎至少在 IE8 中正确显示，因此是 lt IE 8 条件。

【讨论】：

感谢IE测试。但我认为重点不是检测是否有 IE，而是浏览器（不管是哪个）正确显示 \r 或 \n。

【解决方案2】：

这似乎适用于我测试的所有浏览器（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);

【讨论】：

我将该变量重命名为 EOL，使其成为全局变量并使用 IIFE 计算其值：jsfiddle.net/XsLME
我的评论很好:)
这个解决方案正是我梦寐以求的。谢谢 Esailija 和 Šime！

【解决方案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 在最后一行末尾添加一个空格。

【讨论】：