Advanced usage skills of split and join functions in JavaScript_javascript skills

Javascript has two very powerful functions that are loved by developers: split and join, two opposing functions. These two functions allow string and array types to be interchanged, that is, arrays can be serialized into strings and vice versa. We can make full use of these two functions. Let’s explore some interesting applications inside. First, let’s introduce these two functions:

String.prototype.split(separator, limit)
separator splits the string into arrays, and the optional parameter limit defines the maximum length of the generated array.

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

The optional parameter separator converts the array into a string. If no separator is provided, a comma will be used as the parameter value (just like the toString function of the 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();

Let’s take a look at these apps:

replaceAll
This simple function, unlike the native replace function, can be used as a global substring replacement without using 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"

For small strings, its performance is weaker than the native function of single character replacement (here refers to the two extra functions of regular expressions), but under mozilla, if this character exceeds 2 or 3 characters, this function runs faster than regular expressions.

occurences
This function can get the number of substring matches. And this kind of function is very straightforward and does not require regularization.

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

This function is borrowed 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 of it lies in the use of the join function. The focus is on the separator parameter value, and the underlying array only contains some undefined values. To illustrate this point more clearly, let’s recreate the above example:

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

Remember that each array element will be converted to a string (an empty string in this case) before joining. This application of the repeat function is one of the few applications where defining an array via an array literal is not feasible.

Use limit parameter
I rarely use the limit optional parameter of the split function. Here is an example of using this limit:

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"

Modify numerical members
If we mix regular expressions, join, and split, we can easily modify the array members. But this function is not as difficult as imagined. Its main function is to remove the string specified in front of each member of the 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 function doesn't work in IE because they incorrectly remove the first empty member from the split. Now let’s fix this function:

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 should we use this technique instead of the map function of array in Emascript 5?

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

In actual applications, when feasible, I usually use the native map function (not available in IE

//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 need to continuously perform pattern matching, but strings do not. Regular expressions can be used on strings, but not on arrays. The power of converting arrays to strings for pattern matching is far beyond the scope of this article. Let's look at a simple application of it.

Suppose the results of the walking competition need to be saved in an array. The purpose is to alternate the contestants with their record times in the array. We can use join and regular expressions to verify whether this storage mode is correct. The following code is to find out if the record time is missed by searching for two consecutive 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"]