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 the jQuery Conference 2010 (Boston, MA) 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.



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.

Reply to this Comment

@Rohit,

Did you try passing the empty string to the split method:

"string".split( "" )

That might work?

Reply to this Comment

Nice movie selection(?) Haha... the function works great. Thanks a million Ben.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.