RE: Problem with Javascript's String::split method in IE

Scott Sauyet wrote:
> I'm having a problem with splitting a string into lines in Javascript.
> An initial test is at
> 
>      http://scott.sauyet.com/Javascript/Issues/LineSplit/1.html
> 
> Firefox and Opera do what's expected, but IE is doing something ...
> bizzare. 
> 
> I'm trying to go after this text:
> 
>      <pre><code id="test">Here is some sample text.
> 
>      Above this is a blank line.
>      And below this is another one.
> 
>      And below this one are two more.
> 
> 
>      That concludes our demonstration.</code></pre>
> 
> With this Javascript:
> 
>      window.onload = function() {
>          var element = document.getElementById("test")
>          var text= element.innerHTML;
>          var lines = text.split(/\r\n|\r|\n/);
>          var s = "";
>          for (var i = 0; i < lines.length; i++) {
>              s += (i + 1) + ": " + lines[i] + "\n";
>          }
>          alert(s);
>      };
> 
> This is the output from Opera and Firefox:
> 
>      1: Here is some sample text.
>      2:
>      3: Above this is a blank line.
>      4: And below this is another one.
>      5:
>      6: And below this one are two more.
>      7:
>      8:
>      9: That concludes our demonstration.
> 
> This is what I get from IE:
> 
>      1: Here is some sample text.Above this is a blank line.
>      2: And below this is another one.And below this one are two more.
>      3: That concludes our demonstration.
> 
> One interesting change is if I remove the <code> block and put the id
> directly on the <pre> element, which I try in
> 
>      http://scott.sauyet.com/Javascript/Issues/LineSplit/1.html
> 
> Firefox and Opera both still do as expected, but IE responds with:
> 
>      1: Here is some sample text.
>      2: Above this is a blank line.
>      3: And below this is another one.
>      4: And below this one are two more.
>      5: That concludes our demonstration.
> 
> In this case, IE splits the lines correctly, but ignores blank lines.
> I really want to be able to go after the <code> element, and I need
> the blank lines too, so this is only marginally helpful.
> 
> Any suggestions would be greatly appreciated.
> 
> Thanks,
> 
>    -- Scott

Well, I don't have a full answer for you, but some testing (replacing
the linebreaks with :'s) reveals that IE's split function treats a
sequence of tokens as one: splitting 'a:b' and 'a::::b' on ':' gives the
same result.  So, that explains why the second version gives 5 lines
instead of 9.

Also, I tried throwing a "alert(element.innerHTML)" in before the split,
and played around with single-character lines a bit; it seems that IE
will concatenate lines until it reaches at least 80 characters, and then
it will start a new one, but only for the innerHTML of a code block.
Really bizarrely, it doesn't even leave a space where the concatenation
occurred, *if* the code block is inside a pre block.  Removing the pre
tag, everything becomes one line, but with spaces between each original
line.

Ok, so I then went and swapped the order of the pre and code tags, so
that the pre tag is inside the code tag.  This actually turned out to
give almost exactly what you'd wanted in the first place (each line is
treated separately, though blank lines still fall prey to IE's odd split
function--and the pre tags are, of course, present)...but only on IE.
Firefox reports that innerHTML is "".

Dunno if that helps at all; at this point, I'll be very interested if
you find a solution.  :-)

-David


Unsubscribe
[email protected]

List info
http://www.quirksmode.org/dom/list.html 
Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/wdf-dom/

<*> To unsubscribe from this group, send an email to:
    [email protected]

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/