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

Javascript preformatted text with cross-browser line breaks

本文关键字：Javascript 格式化 文本 换行符 浏览器      更新时间：2023-09-26

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

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

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

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

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

相关文章：