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 でテストしています) ではスペースになります
  • \rIE でのみ改行します
  • \r\nすべてのブラウザで動作しますが、IE では 2 行目の先頭のスペースが恐ろしいです
  • \n\r全体としても問題ありませんが、IE では、最初の行の最後のスペースは私のレイアウトには受け入れられません。

<br>IE はマルチスペースを折りたたむため、innerHTMLは使用できません。
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 に答える