JavaScript split Bugs: Fixed!

/*!
 * Cross-Browser Split 1.1.1
 * Copyright 2007-2012 Steven Levithan <stevenlevithan.com>
 * Available under the MIT License
 * ECMAScript compliant, uniform cross-browser split method
 */

/**
 * Splits a string into an array of strings using a regex or string separator. Matches of the
 * separator are not included in the result array. However, if `separator` is a regex that contains
 * capturing groups, backreferences are spliced into the result each time `separator` is matched.
 * Fixes browser bugs compared to the native `String.prototype.split` and can be used reliably
 * cross-browser.
 * @param {String} str String to split.
 * @param {RegExp|String} separator Regex or string to use for separating the string.
 * @param {Number} [limit] Maximum number of items to include in the result array.
 * @returns {Array} Array of substrings.
 * @example
 *
 * // Basic use
 * split('a b c d', ' ');
 * // -> ['a', 'b', 'c', 'd']
 *
 * // With limit
 * split('a b c d', ' ', 2);
 * // -> ['a', 'b']
 *
 * // Backreferences in result array
 * split('..word1 word2..', /([a-z]+)(\d+)/i);
 * // -> ['..', 'word', '1', ' ', 'word', '2', '..']
 */
var split;

// Avoid running twice; that would break the `nativeSplit` reference
split = split || function (undef) {

    var nativeSplit = String.prototype.split,
        compliantExecNpcg = /()??/.exec("")[1] === undef, // NPCG: nonparticipating capturing group
        self;

    self = function (str, separator, limit) {
        // If `separator` is not a regex, use `nativeSplit`
        if (Object.prototype.toString.call(separator) !== "[object RegExp]") {
            return nativeSplit.call(str, separator, limit);
        }
        var output = [],
            flags = (separator.ignoreCase ? "i" : "") +
                    (separator.multiline  ? "m" : "") +
                    (separator.extended   ? "x" : "") + // Proposed for ES6
                    (separator.sticky     ? "y" : ""), // Firefox 3+
            lastLastIndex = 0,
            // Make `global` and avoid `lastIndex` issues by working with a copy
            separator = new RegExp(separator.source, flags + "g"),
            separator2, match, lastIndex, lastLength;
        str += ""; // Type-convert
        if (!compliantExecNpcg) {
            // Doesn't need flags gy, but they don't hurt
            separator2 = new RegExp("^" + separator.source + "$(?!\\s)", flags);
        }
        /* Values for `limit`, per the spec:
         * If undefined: 4294967295 // Math.pow(2, 32) - 1
         * If 0, Infinity, or NaN: 0
         * If positive number: limit = Math.floor(limit); if (limit > 4294967295) limit -= 4294967296;
         * If negative number: 4294967296 - Math.floor(Math.abs(limit))
         * If other: Type-convert, then use the above rules
         */
        limit = limit === undef ?
            -1 >>> 0 : // Math.pow(2, 32) - 1
            limit >>> 0; // ToUint32(limit)
        while (match = separator.exec(str)) {
            // `separator.lastIndex` is not reliable cross-browser
            lastIndex = match.index + match[0].length;
            if (lastIndex > lastLastIndex) {
                output.push(str.slice(lastLastIndex, match.index));
                // Fix browsers whose `exec` methods don't consistently return `undefined` for
                // nonparticipating capturing groups
                if (!compliantExecNpcg && match.length > 1) {
                    match[0].replace(separator2, function () {
                        for (var i = 1; i < arguments.length - 2; i++) {
                            if (arguments[i] === undef) {
                                match[i] = undef;
                            }
                        }
                    });
                }
                if (match.length > 1 && match.index < str.length) {
                    Array.prototype.push.apply(output, match.slice(1));
                }
                lastLength = match[0].length;
                lastLastIndex = lastIndex;
                if (output.length >= limit) {
                    break;
                }
            }
            if (separator.lastIndex === match.index) {
                separator.lastIndex++; // Avoid an infinite loop
            }
        }
        if (lastLastIndex === str.length) {
            if (lastLength || !separator.test("")) {
                output.push("");
            }
        } else {
            output.push(str.slice(lastLastIndex));
        }
        return output.length > limit ? output.slice(0, limit) : output;
    };

    // For convenience
    String.prototype.split = function (separator, limit) {
        return self(this, separator, limit);
    };

    return self;

}();

80 thoughts on “JavaScript split Bugs: Fixed!”

1. yeah so i found your page after wondering why tf a very simple regex was returning different results in Opera and Mozilla – i thought i was going insane, until finding posts like this on your blog – when i see stuff like “runs on cmucl, allegro, sbcl, LispWorks, OpenMCL”, i wonder…what did the LISP guys do that browser guys have such trouble with..

2. Thanks. I used your script and it saved me a huge headache with IE not treating splits like other browswers do. This script was very well done, and I liked your validation page, also very useful.

3. Pingback: Grabbing Code by the 00’s

4. Hey this code is great, excellent job! I made some optimizations for my particular use cases because I was worried about performance using this implementation versus the native one. One thing I do often is split many (hundreds or thousands) strings with the same RegExp object and your code is reconstructing separator up to two times per split. To make this faster I added some object caching on the separator parameter so it will only reconstruct the regex the first time you split with it. Also, since cross-browser behavior with string separators is consistent I just made it use the native implementation if separator isn’t an instance of RegExp. It still passes your test page with flying colors, though I only tested Firefox 2, Safari 3, and IE6. Drop me a line if you you’d like to check out the changes and possibly absorb them into your copy.

5. Marcel, I’m interested. I’d already planned to change this to use the native split method for non-regex separators if I ever got around to updating it. As for caching to avoid regex recompilation, some browsers might do that automagically, so I’d be interested in testing exactly how it affects each of the major browsers before making such a change. Finally, I believe my script might fail the test page in KHTML (as opposed to WebKit) -based browsers such as Konqueror. If that’s the case, I’d want to look into how to address that (if at all possible) before re-releasing. I’ll send you an email.

6. Just want to say thanks for the script, it works perfectly.

7. Thank you, just, thank you.

8. Thank you very much for this work. This keeps my simple cross browser project simple.

9. Dude,

   You saved my bacon with this one! Been fighting this for a couple of days and ran across your script this morning. Fired it off and BAM! worked the first time with a RegExp that worked great in FireFox but was tanking in IE.

   Thanks again.

10. I’m happy to hear that this has helped you all!

    I’ve just modified the script to use the native split method when non-regex separators are provided, in order to run a little faster in such cases. No other significant changes were made.

11. I’d replace:
    var nativeSplit = nativeSplit || String.prototype.split;
    for
    String.prototype._split = String.prototype._split || String.prototype.split;

    So you don’t pollute the window with globals..

    Hope that helps

12. @Ariel Flesler:

    Moving the namespace pollution from the window object to the String.prototype object (which is also available globally) makes things worse, IMO. And while you could wrap all of the code in an anonymous function to avoid adding any global variables, I think there is some benefit to keeping the native version available to other code, for testing purposes if nothing else. As for the name “_split”, I intentionally avoided that because I think it’s more likely to collide with other libraries which might do something similar.

    For the record, the reason I do nativeSplit = nativeSplit || String.prototype.split instead of just nativeSplit = String.prototype.split is because otherwise, running the code twice would break the reference to the native global.

13. Have you considered trying to get this implemented in one of the framework libraries?

14. Well, it’s out there, and MIT licensed. Other libraries are welcome to use it if they’d like to. Incidentally, a slightly modified version of this code will be included in the next version of my XRegExp library.

15. Can you give some examples of how you call this? It is just not clear how to implement.

    Many Thanks

16. @Dale, it just overrides the native split method, so you can use it as simply as something like this:

    var numbers = "1:2:3".split(/:/);
// -> ["1","2","3"]

    or…

    var numbers = "1:2:3".split(/(:)/);
// -> ["1",":","2",":","3"]

    Refer to the Mozilla Developer Center for more info.

17. Pingback: JavaScript split problems « News from MathTran

18. Afternoon Steve,
    Thanks for this great script! Spent a few ours trying to get a split and regex working properly… after many google searches I found this site. I linked your script, used the proper syntax and *POOF it worked precisely as I needed it to!

    Thanks man!!

    You dont have a donate box, otherwise I would donate some $$ for your efforts!

19. @Tim Lavelle, thanks!

    I’ve just upgraded this script to v0.3. Hallvord Steen of Opera helped me spot an issue with the previous version. When using String.prototype.split, if the last match of the separator within the subject string ended at the end of the string, and the separator was capable of matching an empty string (e.g. with /a?/), a trailing empty string value was not appended to the result array even when the separator did not match an empty string in that last case. This followed Firefox’s native handling, but not the spec (which at least Opera follows correctly).

    The new version of the script fixes this error. I’ve also updated the test page accordingly.

20. Please forgive me for my ignorance, but how do I use this script and call the function? It looks like it’ll solve all my problems, but I’m missing how to use this to “split” out my variable?

    Thanks.

21. i really appreciate it!!

22. I am trying to filter the values from an a textarea and pass it into a new line of array so that it populate the of a box. This works fine on mozilla and IE 7.0 but with lower version of IE it wouldnt work , rather it just selects the first line and rejects the rest.

    This is the content of the textarea , I want to make it check for new lines and split with \n then add to an array

    9845747594
    4545454545
    5454656565
    6565656566

    function OnClickAddNumber()
    {
    	var	strValue	= document.SMS.Number.value;
    	var separator = '\n';
    	var strValue_array = strValue.split(separator);
    	var len = strValue_array.length;
    	
    
    	var i = 0;
    	var mumu=1;
    	
    		for(var i=0; i 500)
    			{
    				alert("You Tried forwarding " + len + " Numbers to the destination box \n But only  500 Number was accepted. \n Its a Rule not an error Okay" )
    				return;
    			}
    			var	iCurNode	= 0;
    			var	oNode		= null;
    			if (strValue_array[i].length < 4 )
    				return;
    			strValue_array[i] += " (Number)"
    			oNode = document.createElement("option");
    			if (oNode == null)
    				return;
    			oNode.appendChild(document.createTextNode(strValue_array[i]));
    			for (var iCurNode = 0; iCurNode < document.SMS.Recipients.length; iCurNode++)
    			{
    				if (strValue_array[i].toLowerCase() = document.SMS.Recipients.length || document.SMS.Recipients.length == 0)
    			{
    				document.SMS.Recipients.appendChild(oNode);
    				document.SMS.Recipients.options[(document.SMS.Recipients.length-1)].selected = true;
    			}
    			mumu+=1;
    		}
    	
    	//document.SMS.Number.value = "";
    }

23. Pingback: Wackylabs.Net : Regex Split bug in JScript?

24. Please note that this script fails (in IE of course) if the split is done on a ~

    It runs native as it’s not an instance of RegEx and adding an exception for ~ causes IE to spit out thousands of splits instead of 2 and causes FireFox’s to fail completely (though it was working fine prior). I’m going to spend some time with it, see if I can’t figure out the problem. I’ll let you know.

25. @JMJimmy, I can’t reproduce the issue in IE8. Which version of IE are you using? Can you provide a script to reproduce the issue?

    As you mentioned, if you split on matches of the string “~” this code will just pass the handling off to the native String.prototype.split. So, if there is a problem, it’s likely an issue that would occur in IE anyway.