Javascript preformatted text with cross-browser line breaks

Question

I have preformatted strings with line-breaks and multi-spaces and I want to append them into a text node.

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

I tried to adopt as line breaker:

\n breaks lines in all browsers, but in IE (I'm testing on 7) becomes a space
\r breaks lines only in IE
\r\n works in all browser but in IE the space at beginning of second line is horror
\n\r also ok in all, but in IE the space at the end of first line is inacceptable for my layout.

I can't use <br> and innerHTML because IE collapses multi-spaces.
jQuery .text(string) has exactly the same behavior of .appendChild(createTextNode(string))

How can I insert cross-browser line breaks?
Eventually, how can I easily detect if a browser supports \n or \r ?

You don't seem to be using jQuery, and I'm not even sure if this is what you're looking for, but you could use `if ($.browser.msie) { /* handle the \n here */}` and the rest normally, but you'd have to use jQuery or go to jQuery source and get the implementation of `$.browser.msie` and apply the same check and handle it differently than other browsers. — MilkyWayJoe, Jun 04 '12 at 19:26
@MilkyWayJoe: I can use jQuery if there are no javascript solutions. — Salvador, Jun 04 '12 at 19:55

score 7 · Accepted Answer · answered Jun 04 '12 at 19:53

7

This seemed to work in all browsers I tested (safari, opera, chrome, firefox, ie7, ie8, ie9):

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

Code:

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);

answered Jun 04 '12 at 19:53

Esailija

138,174
23
272
326

I'd rename that variable to `EOL`, make it global and use an IIFE to compute its value: http://jsfiddle.net/XsLME/ – Šime Vidas Jun 04 '12 at 20:01
I'm fine with my comment `:)` – Šime Vidas Jun 04 '12 at 20:02
This solution is exactly what I dreamed. Thank you Esailija and Šime! – Salvador Jun 06 '12 at 09:18

score 4 · Answer 2 · answered Jun 04 '12 at 19:39

Since IE seems to be odd one out, perhaps store the characters in a variable and use conditional comments to change it as necessary:

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

Your snippet does seem to display properly in at least IE8, thus the lt IE 8 condition.

Thank you for IE test. But I think the point isn't to detect if IE or not, but if the browser (regardless which is) correctly displays `\r` or `\n`. — Salvador, Jun 04 '12 at 20:02

Salvador · Answer 3 · 2013-08-13T01:59:30.403

In the meanwhile I found an easier solution that seems to be cross-browser:
innerHTML with a brute <pre> imposition

<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 becomes a single return
\n\r double return

Imperfection: IE 10 compatibility mode 7 add a space at the end of final line.

Javascript preformatted text with cross-browser line breaks

3 Answers3