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?

Answer 1

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 (eg, 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.

Answer 2

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;},