Additional String Methods

In this section we will take a look at the split(), replace(), search(), and match() methods, and see how they work without regular expressions.

The split() Method

The String object's split() method splits a single string into an array of substrings. Where the string is split is determined by the separation parameter that we pass to the method. This parameter is simply a character or text string.

For example, to split the string "A,B,C" so that we have an array populated with the letters between the commas, the code would be as follows:

var myString = "A,B,C";
var myTextArray = myString.split(',');

JavaScript creates an array with three elements. In the first element it puts everything from the start of the string myString up to the first comma. In the second element it puts everything from after the first comma to before the second comma. Finally, in the third element it puts everything from after the second comma to the end of the string. So, our array myTextArray will look like this:

If, however, our string was "A,B,C," JavaScript would split this into four elements, the last element containing everything from the last comma to the end of the string, or in other words, an empty string.

This is something that can catch you off guard if you're not aware of it.

Try It Out – Reversing the Order of Text

Let's create a short example using the split() method, in which we reverse the lines written in a <textarea> element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example 1</title>
<script language="JavaScript" type="text/JavaScript">
function splitAndReverseText(textAreaControl)
{
   var textToSplit = textAreaControl.value;
   var textArray = textToSplit.split('\r\n');
   var numberOfParts = 0;
   numberOfParts = textArray.length;
   var reversedString = "";
   var indexCount;
   for (indexCount = numberOfParts - 1; indexCount >= 0; indexCount--)
   {
      reversedString = reversedString + textArray[indexCount];
      if (indexCount > 0)
      {
         reversedString = reversedString + "\r\n";
      }
   }
   textAreaControl.value = reversedString;
}
</script>
</head>
<body>
<form name=form1>
<textarea rows=20 cols=40 name=textarea1 wrap=soft>Line 1
Line 2
Line 3
Line 4</textarea>
<br>
<input type="button" value="Reverse Line Order" name=buttonSplit
   onclick="splitAndReverseText(document.form1.textarea1)">
</form>
</body>
</html>

Save this as ch8_examp1.htm and load it into your browser. You should see the screen shown in Figure 8-1.

Figure 8-1

Clicking the Reverse Line Order button reverses the order of the lines, as shown in Figure 8-2.

Figure 8-2

Try changing the lines within the textarea to test it further.

Note that this code is Windows-specific—it uses the escape characters \r\n twice. If you are running the code on a Unix machine, you will need to replace \r\n with \n, and if you are using a Macintosh machine, you will need to replace \r\n with \r. Note also that for Netscape 6 and 7, you need to replace the \r\n with \n.

How it Works

The key to how this code works is the function splitAndReverseText(). This function is defined in the script block in the head of the page and is connected to the onclick event handler of the button further down the page.

<input type="button" value="Reverse Line Order" name=buttonSplit
   onclick="splitAndReverseText(document.form1.textarea1)">

As you can see, we pass a reference of the textarea that we want to reverse as a parameter to the function. By doing it this way, rather than just using a reference to the element itself inside the function, we make the function more generic, so we can use this function with any textarea element.

Now, on with the function. We start by assigning the value of the text inside the textarea element to the textToSplit variable. We then split that string into an array of lines of text using the split() method of the String object and put the resulting array inside the textArray variable.

function splitAndReverseText(textAreaControl)
{
   var textToSplit = textAreaControl.value;
   var textArray = textToSplit.split('\r\n');

So what do we use as the separator to pass as a parameter for the split() method? Recall from Chapter 2 that the escape character \n is used for a new line and \r is used for a carriage return. So, on Windows, what we need to use is \r\n. However, just to confuse things, if you have a Unix machine you will need to replace this with \n, and on a Macintosh machine you'll have to use \r. Another point to add to the confusion is that Netscape 6 seems to need \n rather than \r\n even on Windows.

We next define and initialize three more variables.

   var numberOfParts = 0;
   numberOfParts = textArray.length;
   var reversedString = "";
   var indexCount;

Now that we have our array of strings, we next want to reverse them. We do this by building up a new string, adding each string from the array, starting with the last and working toward the first. We do this in the for loop, where instead of starting at zero and working up as we usually do, we start at a number greater than zero and decrement until we reach zero, at which point we stop looping.

   for (indexCount = numberOfParts - 1; indexCount >= 0; indexCount--)
   {
      reversedString = reversedString + textArray[indexCount];
    
      if (indexCount > 0)
      {
         reversedString = reversedString + "\r\n";
      }
   }

When we split the string, all our line formatting is removed. So, in the if statement we add a carriage return and linefeed (\r\n) onto the end of each string, except for the last string; that is, when the indexCount variable is zero. (Remember that if you are using Unix, a Macintosh, or Netscape 6, you will need to use a different escape character, as described earlier.)

Finally we assign the text in the textarea element to the new string we've built.

   textAreaControl.value = reversedString;
}

After we've looked at regular expressions, we'll take another look at the split() method.

The replace() Method

The replace() method searches a string for occurrences of a substring. Where it finds a match for this substring, it replaces the substring with a third string that we specify.

Let's look at an example. Say we have a string with the word "May" in it as shown in the following:

var myString = "The event will be in May, the 21st of June";

and we want to replace "May" with "June." We could use the replace() method like so:

myCleanedUpString = myString.replace("May","June");

The value of myString will not be changed. Instead, the replace() method returns the value of myString but with "May" replaced with "June." We assign this returned string to the variable myCleanedUpString, which will contain the text.

"The event will be in June, the 21st of June"

The search() Method

The search() method allows you to search a string for a particular piece of text. If the text is found, the character position at which it was found is returned; otherwise -1 is returned. The method takes only one parameter, namely the text you want to search for.

When used with plain text, the search() method provides no real benefit over methods like indexOf(), which we've already seen. However, we'll see later that it's when we use regular expressions that the power of this method becomes apparent.

In the following example, we want to find out if the word Java is contained within the string called myString.

var myString = "Beginning JavaScript, Beginning Java, Professional JavaScript";
alert(myString.search("Java"));

The alert box that occurs will show the value 10, which is the character position of the J in the first occurrence of Java, as part of the word JavaScript.

The match() Method

The match() method is very similar to the search() method, except that instead of returning the position where a match was found, it returns an array. Each element of the array contains the text of each match that is found.

Although you can use plain text with the match() method, it would be completely pointless to do so. For example, take a look at the following:

var myString = "1997, 1998, 1999, 2000, 2000, 2001, 2002";
myMatchArray = myString.match("2000");
alert(myMatchArray.length);

This code results in myMatchArray holding an element containing the value 2000. Given that we already know our search string is 2000, you can see it's been a pretty pointless exercise.

However, the match() method makes a lot more sense when we use it with regular expressions. Then we might search for all years in the 21st century, that is, those beginning with 2. In this case, our array would contain the values 2000, 2000, 2001, and 2002, which is much more useful information!