How to count new lines in Internet Explorer?

Question

Hey, all. I'm doing my own syntax highlighter for Javascript and CSS, and I've run into an issue with Internet Explorer (big surprise). I grab all the contents of a code.block tag (example below) using innerHTML, and .split("\n") that result to get each line by itself. This works wonderfully except in IE.

I have tried using innerText and .split("\r\n") also without success. Can anyone recommend a solution? If it makes a difference, my code.block tags are styled to be white-space:pre-wrap.

<code class="block css">div#randomBarsDemo {
    width:175px;
    height:200px;
}

div#randomBarsDemo div {
    background-color:#111;
    width:100%;
}</code>

Answer 1

According to my research, you're going to have more issues with browser consistency other than this problem. My advice would be to use the script referenced below to fix all of the issues with other browsers as well.

http://blog.stevenlevithan.com/archives/cross-browser-split

Answer 2

The best thing I've found so far (in IE8 for Windows at least) is to get the innerText from a target element, replace \r with <br/>, and stick this back into the innerHTML

var el = document.getElementById('target');
el.innerHTML = el.innerText.replace(/\r/,"<br/>");

Then, if you want to get the target line-by-line in the future you can .split() on <BR>. It has to be <BR> and not <br/> thanks to Internet Explorer's auto HTML parsing.

So to directly answer the question, to count lines, you need to get the innerText, and look for \rs, not \n. Please let me know if this does or doesn't solve your problem, so I know whether this is helping people or leading them astray.