<html>
<head>
<title>IE preformatted text sucks</title>
</head>
<body>
<pre id="test">
a b c
d e f
</pre>
<script type="text/javascript"><!--
var textContent = document.getElementById("test").innerText;
textContent = textContent.replace("a", "<span style=\"color:red;\">a</span>");
document.getElementById("test").style.whiteSpace = "pre";
document.getElementById("test").innerHTML = textContent;
--></script>
</body>
</html>
<head>
<title>IE preformatted text sucks</title>
</head>
<body>
<pre id="test">
a b c
d e f
</pre>
<script type="text/javascript"><!--
var textContent = document.getElementById("test").innerText;
textContent = textContent.replace("a", "<span style=\"color:red;\">a</span>");
document.getElementById("test").style.whiteSpace = "pre";
document.getElementById("test").innerHTML = textContent;
--></script>
</body>
</html>
Notice if you run that code that although it correctly highlights the "a" character, the <pre> tag loses all formatting in IE. This works as expected in FF, Safari, iPhone and Opera. But in IE6 (the only IE I could test in) it ends up on one line.
Anyone know that solution that DOESN'T involve replacing the whitespace with HTML <br> etc? I don't want to have to encode all spaces, tabs and newlines into HTML since that defies the point of the <pre> tag
It would also be way too slow for what I'm doing.I really hate IE
