Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with:

Ask Ben: Converting Javascript Lists To Arrays

By Ben Nadel on

Is there a way in Javascript to convert a list to an array like ColdFusion's ListToArray() method?

You can convert a list to an array using the String::split() method. The Javascript split() method is quite similar to the ColdFusion ListToArray() method. Both take a string list and split the list based on a given delimiter. As with all things Javascript, there is a simple version and an advanced version.

Let's start off creating a list in javascript:

  • // Create a pipe-delimited list (|) of movies.
  • var strMovieList = "Over 40 vol.10|Mega Butt vol.3|Barely Legal vol.18";

The simple version uses a constant string as the list delimiter:

  • var arrMovies = strMovieList.split( "|" );

In this case, we are using the pipe character "|" as our delimiter. This call will return an array with three values:

  • arrMovies[ 0 ] == "Over 40 vol.10";
  • arrMovies[ 1 ] == "Mega Butt vol.3";
  • arrMovies[ 2 ] == "Barely Legal vol.18";

The difference here between Javascript and ColdFusion is that in Javascript, you cannot pass multiple delimiters into split(). If you attempted to use the pipe and the comma as a delimiter and passed in:

  • var arrMovies = strMovieList.split( "|," );

... you will only get an array with one value, the original string, since the substring "|," could not be found in the original list.

That's where the advanced version comes in. And yes, you guessed it: it involves are good friend, the Regular Expression. Instead of passing a static string into split(), you can pass in a regular expression (RegExp) that will be used to split the list. Let's say we didn't just want to break out the individual movies. Let's say we wanted to break out the individual words into an array. To do so, we would want to split on both the pipe "|" AND the space " " characters:

  • var arrMovies = strMovieList.split( new RegExp( "[| ]{1}", "g" ) );

This will give us an array of all the words in the original list.

Now, if you have been paying attention to previous posts, you will remember that the RegExp() constructor takes in a second argument, the flags ("g", "i"). In this case, we are sending the flag "g" for "global" but it is not really required. I do it out of habit, but splitting a string is global no matter what (as far as I know). You can and should use the case insensitive flag "i" if it is required when splitting.

Tweet This Groovy post by @BenNadel - Ask Ben: Converting Javascript Lists To Arrays Thanks my man — you rock the party that rocks the body!


Reader Comments

Great document. Using Javascript, is it possible to split on multiple delimiters AND include the delimiters in the split array response?

e.g.

"a+b-c".split(new RegExp("[+-]", "g"))

... returns ...

a
b
c

How do I get it to return ...

a
+
b
-
c

Someone, somewhere on some forum stated that this could be done by wrapping the delimiters in the RegExp expression in parenthesis but that didn't work for me.