Ask Ben: Converting Javascript Lists To Arrays
Posted July 18, 2006 at 10:08 AM by Ben Nadel
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
There are a number of gotcha's when using a regex to split a string in JavaScript, since all current, major browsers have some related bugs. In particular, IE doesn't include empty values in the returned array when using a regex as the delimiter (though it does when using a string as delimiter).
See this page for a fix: http://blog.stevenlevithan.com/javascript/cross-browser-split/
@Steve,
That function you wrote looks pretty cool.
Great tip, helped solve my javascript problem I was running into.
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.
@Rohit,
Did you try passing the empty string to the split method:
"string".split( "" )
That might work?
@Rohit, using capturing parentheses in your split pattern probably didn't work for you since you're using Internet Explorer, which doesn't follow the JavaScript split specification on that point. It will work if you first run the following script, which fixes String.prototype.split cross-browser:
http://blog.stevenlevithan.com/archives/cross-browser-split
Nice movie selection(?) Haha... the function works great. Thanks a million Ben.
Haha, the movie list rocks!
Walk like an Egyptian.
@Chad, @Virgil,
Ha ha, glad it was amusing.
@Phillip,
That, my friend, is random!
Lol @ Over 40 Vol. 10
Nice one.
