javascript split regex bug in IE7

Question

I am trying to split with this regex ({[^{}]*}) in javascript and I get different result btw IE7 and FF. The firefox result is the right one.

<style>
.box.round {
    border-radius: 10px;
}
</style>
<script>
jQuery(function ($) {
    $('style').each(function () {
    text = $(this).html();

    alert(text);
    alert(text.split(/({[^{}]*})/));
    // result in FF: .box.round ,{border-radius: 10px;},
    // result in IE7: .box.round
    });
});
</script>

Update Is there a way to change the regex so it work in IE7 also without adding a javascript library?

Is there a way to change the regex so it work in IE7 also without adding a javascript library? — Codler, Dec 11 '10 at 17:33
Parsing CSS with nothing but a regular expression is not necessarily going to work out well for you. — Pointy, Dec 11 '10 at 17:57

score 6 · Answer 1 · answered Dec 11 '10 at 17:26

See this old blog post for a possible solution to the variation in handling of captured groups in .split() regexes.

From that article:

Internet Explorer excludes almost all empty values from the resulting array (e.g., when two delimiters appear next to each other in the data, or when a delimiter appears at the start or end of the data). This doesn't make any sense to me, since IE does include empty values when using a string as the delimiter.

Internet Explorer and Safari do not splice the values of capturing parentheses into the returned array (this functionality can be useful with simple parsers, etc.)

Firefox does not splice undefined values into the returned array as the result of non-participating capturing groups.

Internet Explorer, Firefox, and Safari have various additional edge-case bugs where they do not follow the split specification (which is actually quite complex).

Levithan's XRegExp library is really small and useful, and it includes the fixes.

Well, you could look at what the library does. It's really not that much code. As far as I know however you have no choice but to "fix" the bugs/incompatibilities as well as you can. The library is nice because it's tested, and it was written by a smart person who's written a book about regular expressions :-) — Pointy, Dec 11 '10 at 17:48

score 0 · Accepted Answer · answered Dec 12 '10 at 11:49

I made a solution that works on regex({[^{}]*}) and probably others too.

function ieSplit(str, separator) {
    var match = str.match(RegExp(separator, 'g'));
    var notmatch = str.replace(new RegExp(separator, 'g'), '[|]').split('[|]');
    var merge = [];
    for(i in notmatch) {
        merge.push(notmatch[i]);
        if (match != null && match[i] != undefined) {
            merge.push(match[i]);
        }
    }
    return merge;
}
alert(ieSplit(text, '({[^{}]*})'));
// result in FF : .box.round ,{border-radius: 10px;},
// result in IE7: .box.round ,{border-radius: 10px;},

javascript split regex bug in IE7

2 Answers2

Linked