javascript split regex bug in IE7

javascript split regex bug in IE7

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.

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

Solutions/Answers:

Solution 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 (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.

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

References

Related:  RegEx for extracting specific textContent in HTML tags