Web Tools #541 - JavaScript Utilities, Build Tools, Uncats

Here are a couple of quick tips for using JavaScript's String.split() method, which I'm sure most of you have used extensively over the years.

This method is used to divide, or split, a string into an array of string values where the separator passed into the method determines where the string should be split. So for example, if I have a string with a bunch of pipe characters in it, I can divide that into substrings like this, thus eliminating all the pipe characters:

That's how most String.split() operations take place, a simple way to split where you're removing the character I'm splitting with and getting everything else in an array.

However, maybe you didn't know that the String.split() method takes an optional second argument. This argument is a positive integer that will restrict the resulting array to that number of items. For example, using the same string as above, I can limit the array to the first two items:

I've passed in "2" as the second argument, which splits the first two items but ignores everything else. If I pass in "0", I'll get an empty array and if I pass in more than the number of items available to split, it will return all the available ones.

Finally, what if I want to split using a specific character as the separator but I also want to preserve the characters as part of the resulting array? Here's how I can do that:

Notice here my string is a bunch of words separated by hyphens. I'm using a regular expression with capturing parentheses, thus the separator character is preserved as part of the array. In this case, it adds three hyphens in their own array slots.

You can try out the above examples in this CodePen and there's a little more info on both of the above features in the MDN article on String.split().

Now on to this week's tools!