PageResource.com - Web Development Tutorials

String Handling 2

Using the split method

The split method is a handy way to "split" a string into two or more parts based on a character that divides the parts. The character that divides the parts could be many things-- a comma, a slash, a pipe symbol ( | ), or another of your choice. For example, look at the string below:

var where_is_mytool="home/mytool/mytool.cgi";

Notice that the slashes coud be used as a way to divide the string into three parts. You could separate the home directory, the file directory, and the file name for the program. To actually do this, we can use the split method. As we did with the charAt and indexOf methods, we take the variable name of the string and add a dot-- and then call the split method:

var where_is_mytool="home/mytool/mytool.cgi";
var mytool_array=where_is_mytool.split("/");

As you can see the split method takes a parameter, which is the character we wish to use to divide the original string. In this case, it is the "/" character. You will also notice that what we get back will be an array (notice the variable we hold the result in is called mytool_array). This array holds the three parts, with the first part held in a variable called mytool_array[0]. So, the first element is zero for the arrays you create with split, just like many others we have seen. Knowing this, we can now use the parts which we get from the split in some way:

<SCRIPT language="JavaScript">
<!--
function divide_string()
{
var where_is_mytool="home/mytool/mytool.cgi";
var mytool_array=where_is_mytool.split("/");
alert(mytool_array[0]+" "+mytool_array[1]+" "+mytool_array[2]);
}
//-->
</SCRIPT>
<FORM>
<INPUT TYPE="button" onClick="divide_string()" value="Go!">
</FORM>

This one will just give us an alert with the three parts when we click a button. You can see it in action using the button below:

Another thing to remember is that there are times when you will not know how many parts the array will have once it is split (for example, if a viewer enters the information in a prompt). To be sure you get them all, you can use a loop and the length method to get all of them. For example:

<SCRIPT language="JavaScript">
<!--
function divide_string2()
{
var my_colors=prompt("What are your favorite colors? (separate with a space)","");
if ((my_colors=="") || (my_colors==null))
{
  alert("You have no favorite colors? Bummer.");
}
else if (my_colors.indexOf(" ")== -1)
 {
  alert("Either you only like one color or you didn't separate with a space.");
  alert("You entered "+my_colors);
  }
else
{
var col_array=my_colors.split(" ");
var part_num=0;
while (part_num < col_array.length)
 {
  alert(col_array[part_num]);
  part_num+=1;
  }
}
}
//-->
</SCRIPT>
<FORM>
<INPUT TYPE="button" onClick="divide_string2()" value="Go!">
</FORM>
Notice that the length method returns the number of elements in the array, which is one greater than the index number for the last element in the array. This is why we use < instead of <=, because part_num will not have an element with the index number equal to the array length, it will only have them up to one less than the array length. So, if you entered 3 colors, the array length is 3, but the index numbers within the array start at zero and are 0, 1, and 2.

The example is below, give it a try:

This validates to some degree, but it doesn't keep a viewer from using a space once and then doing something else. It could still not be quite right if someone types in "red greenorange,blue". This would give back one alert with "red" and another with "greenorange,blue". Still, it will do the job for the most part, and uses some of the things we learned in earlier sections.

Well, that is how to use the split method, I'm sure you can create a more useful script with it. You could use it to grab parts of urls, email addresses, and so on. This will also come in handy in other areas, such as in the use of cookies and form validation.

Well, that does it for now, let's move on to Screen Resolution Detection!

previous
Previous
By: John Pollock next
Next

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy