JavaScript’s Dream Team: in praise of split and join

JavaScript is blessed with two remarkably powerful yet under-appreciated methods: split and join act as perfect counterparts. Their symmetry allows JavaScript’s array and string types to enjoy a unique coupling: arrays can easily be serialized to strings and back again, a feature we can leverage to good effect. In a moment we’ll explore some interesting applications – but first some introductions:

String.prototype.split(separator, limit)

Creates an array of substrings delimited by each occurrence of the separator. The optional limit argument sets the maximum number of members in the resulting array.

"85@@86@@53".split('@@'); //['85','86','53'];
"banana".split(); //["banana"]; //( thanks peter (-: )
"president,senate,house".split(',',2); //["president", "senate"]

 
Array.prototype.join(separator)

Converts the elements of the array to strings, which are then concatenated into a single string using the optional separator string as glue. If no separator is supplied then a comma is used as the binding (which is essentially the same as the toString method of array).

["slugs","snails","puppy dog's tails"].join(' and '); //"slugs and snails and puppy dog's tails"
['Giants', 4, 'Rangers', 1].join(' '); //"Giants 4 Rangers 1"
[1962,1989,2002,2010].join(); //"1962,1989,2002,2010"

 
Now lets put them to work…

replaceAll

Here’s a simple function that, unlike the native replace method, will perform a global substring replacement without the use of regular expressions.

String.prototype.replaceAll = function(find, replaceWith) {
    return this.split(find).join(replaceWith);	 
}

"the man and the plan".replaceAll('the','a'); //"a man and a plan"

It performs slower than the native function for small strings with many single character replacements (the trade off is two extra function calls against a regex match) but is actually faster in mozilla when the string gets long and the regex expression runs to more than 2 or 3 chars

occurences

This method tallies the number of matches of a given substring. Again the implementation is straightforward and the invocation requires no regex.

String.prototype.occurences = function(find, matchCase) {
    var text = this;
    matchCase || (find = find.toLowerCase(), text = text.toLowerCase());
    return text.split(find).length-1;	 
}

document.body.innerHTML.occurences("div"); //google home page has 114
document.body.innerHTML.occurences("/div"); //google home page has 57
"England engages its engineers".occurrences("eng",true); //2

 
repeat

I stole this little gem from Prototype.js:

String.prototype.repeat = function(times) {
    return new Array(times+1).join(this);	 
}

"go ".repeat(3) + "Giants!"; //"go go go Giants!"

The beauty lies in the novel use of the join method. The focus is on the separator argument while the base array comprises only undefined member values. To illustrate the principal more clearly, lets reproduce the above example in longhand:

[undefined,undefined,undefined,undefined].join("go ") + "Giants!";

Remember each array member is converted into a string (in this case an empty string) before being concatenated. The implementation of the repeat function is one of the few examples where defining the array via an array literal is not feasible.

Employing the limit param

I rarely use the split function’s optional limit param, but I conjured up an example that does:

var getDomain = function(url) {
    return url.split('/',3).join('/');
}

getDomain("http://www.aneventapart.com/2010/seattle/slides/"); 
//"http://www.aneventapart.com"
getDomain("https://addons.mozilla.org/en-US/firefox/bookmarks/"); 
//"https://addons.mozilla.org"

(for ‘domain’, read ‘protocol and domain’)

Modifying array members

If we add regex into the mix we can easily use join and split to modify the members of an array. Don’t be scared by the name of the function that follows – its task is merely to remove the given string from the front of each item in a given array.

var beheadMembers = function(arr, removeStr) {
    var regex = RegExp("[,]?" + removeStr);
    return arr.join().split(regex).slice(1);
}

//make an array containing only the numeric portion of flight numbers
beheadMembers(["ba015","ba129","ba130"],"ba"); //["015","129","130"]

 
Unfortunately this will fail in IE because they incorrectly omit the first empty member from the split. So now things get a little less pretty:

var beheadMembers = function(arr, removeStr) {
    var regex = RegExp("[,]?" + removeStr);
    var result = arr.join().split(regex);
    return result[0] && result || result.slice(1); //IE workaround
}

 
Why would we use this technique instead of simply using the array map method specified by EcmaScript 5?

["ba015","ba129","ba130"].map(function(e) {
	return e.replace('ba','')
}); //["015","129","130"] 

 
Well in production code I’d generally use the native map implementation when its available (its not available in IE<9) – this example was mainly intended as an educational tool. But its also worth noting that the invocation syntax of the join/split technique is shorter and a little more direct. Most interestingly its also very efficient. When the regex is pre-cached, it slightly outperforms map in FF and Safari even for very small arrays – and for larger arrays the map version is blown out of the water (in all browsers) because the join/split technique requires dramatically fewer function calls:

//test 1 - using join/split
var arr = [], x = 1000;
while (x--) {arr.push("ba" + x);}

var beheadMembers = function(arr, regex) {
    return arr.join().split(regex).slice(1);
}

var regex = RegExp("[,]?" + 'ba');
var timer = +new Date, y = 1000;
while(y--) {beheadMembers(arr,regex);};
+new Date - timer;

//FF 3.6 733ms
//Ch 7   464ms
//Sa 5   701ms
//IE 8  1256ms 

//test 2 - using native map function 
var arr = [], x = 1000;
while (x--) {arr.push("ba" + x);}

var timer = +new Date, y = 1000;
while(y--) {
    arr.map(function(e) {
        return e.replace('ba','')
    }); 
}
+new Date - timer;

//FF 3.6 2051ms
//Cr 7    732ms
//Sf 5   1520ms 
//IE 8   (Not supported)

 
Pattern matching

Arrays require iteration to perform pattern searching, strings don’t. Regular expressions can be applied to strings, but not to arrays. The benefits of converting arrays to strings for pattern matching are potentially huge and beyond the scope of this article, but let’s at least scratch the surface with a basic example.

Suppose the results of a foot race are stored as members of an array. The intention is that the array should alternate the names of runners and their recorded times. We can verify this format with a join and a regular expression. The following code tests for accidentally omitted times by looking for two successive names.

var results = ['sunil', '23:09', 'bob', '22:09', 'carlos', 'mary', '22:59'];
var badData = results.join(',').match(/[a-zA-Z]+,[a-zA-Z]+/g);
badData; //["carlos,mary"]

 
Wrap up

I hope I’ve demonstrated a few reasons to nominatge split and join as JavaScript’s perfect couple. There are plenty of other satisfying uses for these stalwart workhorses, feel free to ping me with any favourites that I left off.

Further Reading

ECMA-262 5th Edition
15.4.4.5 Array.prototype.join
15.5.4.14 String.prototype.split

• JavaScript