code inside pre goes in one line on IE8

问题

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

回答1:

"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).

回答2:

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

回答3:

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

回答4:

Use

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

回答5:

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.

回答6:

Use

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

来源：https://stackoverflow.com/questions/7445502/code-inside-pre-goes-in-one-line-on-ie8

标签

javascript

jquery

html

internet-explorer-8

pre