code inside pre goes in one line on IE8

Question

I'm trying to take the value from a textarea and put it inside a pre tag, and it works ok on chrome and mozilla but on IE8 the entire content stays on one line in the pre tag

jsbin link: http://jsbin.com/uwunug/4/edit

this is the whole thing:

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

</head>
<body>
<script type='text/javascript'>
$(function(){

$('#b1').click(function(){
x = $('textarea').val();
$('#tt').html(htmlEscape(x));    
});

});
function htmlEscape(str) {
    return String(str)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')            
            .replace(/>/g, '&gt;');
}
</script>


 <textarea cols='50' rows='20'>
 </textarea>
 <button id='b1'>make code</button>
 <pre class="prettyprint" id='tt'>
</pre>

</body>
</html>

I noticed (by replacing \n to 'enter') the \n chars go into the pre but they don't produce new line in there

I notice you're marking your "pre" with "prettyprint" -- does that mean you might be (a) using Google Prettify, and therefore (b) running into [this issue](http://stackoverflow.com/questions/5830408/google-prettify-removes-line-breaks)? (I can't tell, because your code doesn't work at all for me on IE8 from jsbin...) — Matt Gibson, Sep 16 '11 at 14:08
@Matt Gibson yes, but atm I removed the prettypring css and js in order to focus just on this issue, have just found a solution btw — Omu, Sep 16 '11 at 14:11

score 4 · Answer 1 · answered Sep 16 '11 at 14:12

4

atm my solution is to add this line at the end:

.replace(/\n/g, '<br\>')

in my htmlEscape, so it's like this:

function htmlEscape(str) {
    return String(str)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')         
            .replace(/</g, '&lt;')                      
            .replace(/>/g, '&gt;')
        .replace(/\n/g, '<br\>');
}

please post your answer if you know a better one

answered Sep 16 '11 at 14:12

Omu

69,856
92
277
407

Thanks it worked for me, I had completly same htmlEscape function and used prettyPrint an it worked on Chrome and FF but your line made it work on IE8 too!(amazing), however I found out that IE or htmlEscape or Prettyprint eats reagular spaces away so I just added one line after yours: `.replace(/ /g, ' ');`. So far so good! – formatc Jun 12 '12 at 13:03

score 2 · Accepted Answer · edited May 23 '17 at 10:34

"IE applies HTML normalization to the data that is assigned to the innerHTML property. This causes incorrect display of whitespace in elements that ought to preserve formatting, such as <pre> and <textarea>."

Inserting a newline into a pre tag (IE, Javascript)

The \n solution is probably going to be your best shot (the only other option is to use innerText it seems, but I prefer your solution).

score 1 · Answer 3 · edited Sep 14 '12 at 08:51

1

Use

document.getElementById("ID").textContent = 'YOUR TEXT';

edited Sep 14 '12 at 08:51

j0k

22,600
28
79
90

answered Sep 14 '12 at 08:45

Thomas

11
1

score 1 · Answer 4 · answered Sep 16 '11 at 15:45

1

If the problem is IE using innerHTML, then don't use innerHTML:

document.getElementById("tt").appendChild(document.createTextNode(x));

instead of

$('#tt').html(htmlEscape(x));

answered Sep 16 '11 at 15:45

James

20,957
5
26
41

score 0 · Answer 5 · answered Feb 20 '13 at 19:16

0

Use

                 replace('\r','&lt;br/&gt;')                               .

answered Feb 20 '13 at 19:16

Luis Eduardo Castillo

1

score 0 · Answer 6 · answered Sep 16 '11 at 14:27

The default behaviour of the <pre> element is to display all white space, including line feeds, so by default you should be seeing new lines where you have \n characters.

If you're not seeing that, then it implies that the default behaviour of the element has been overridden by your stylesheets.

This is done using the CSS white-space property. By default the <pre> tag has this property set to white-space:pre;. Setting the white-space property like this will cause the <pre> element - or indeed any other element - to display all white space, including line feeds, as per the default for the <pre> element.

There are a number of possible settings for the white-space property. You can find examples of them all and how they affect the layout here: http://www.impressivewebs.com/css-white-space/

So if you want the <pre> to act as normal, you should either remove the styles which are currently setting the white-space property, or override them and set it back to the default value.

Hope that helps.

ps - if you plan to try out the various values for white-space as listed on the page I linked above, please note that older versions of IE (IE7 and earlier) may not support all possible options for this property. If you're worried about this, then QuirksMode.org has a compatibility table which may help you.

hmm, in that case, there's no good reason for `
` to show in any format other than the default. Have you checked the Developer Tools (F12) to see what styles are actually being applied? There might be something you've missed. — Spudley, Sep 16 '11 at 16:24
it's nothing there and I tried setting style="white-pace:pre;" and that didn't changed anything — Omu, Sep 16 '11 at 16:41

code inside pre goes in one line on IE8

6 Answers6

Linked