Substring() and Split()

 

 

For this last section of the Javascript course, we're going to look at manipulating text with Javascript's own in-built functions. These in-built functions can really make your life easier, and if you're serious about learning the Javascript language you just have to know them. The ones we're going to cover are these:

substring()
charAt()
split () and join()
toUpperCase()
toLowerCase()

We're going to learn about substring() and split() first. To get the hang of these functions, we'll create a simple little game. Off we go.

 

A Name Swapper Game

The game we'll create is this: A name is entered in a text box. When a button is clicked, a function will swap the first two letters of the surname with the first two letters of the first name, and vice versa.

If that's not too clear, here's the little programme we're going to write. Click the button below and see what happens.

The "Ga" of Gates is now the "Bi" of Bill; and the "Bi" of Bill is now the "Ga" of Gates.

So, create a web page with a button and a text box on it, just like above. Put the textbox and button inside of FORM tags. Call the form f1 and the text box t1. Add an onClick() event to the button. The onClick event will call our function:

onClick = jumble()

function jumble() {

}

The first thing we need to do in our function is get the name from the text box.

function jumble() {

fname = document.f1.t1.value

}

 

split()

Next, we need to split the name entered into a first name and a second name. We can use the split() function for that:

function jumble() {

fname = document.f1.t1.value
SplitName = fname.split(" ")

}

The split() function splits text and puts the pieces into an array, with each piece taking up one slot in the array. For example, if you were to split "This is some text", the split() function would create an array with four slots (zero to 3). The first slot in the array would contain "This", the second slot would contain "is", the third "some" and the fourth "text".

The syntax for the split() function is this:

String.split([separator])

String is the text you want to split. You then type a full stop followed by split(). Inside the round brackets you type the character that you want the function to use when it's doing the splitting (the separator). In our function we typed a space surrounded by double quotes:

SplitName = fname.split(" ")

So we're telling the function to look for a single space in the variable fname. When it finds a single space, use that to add an item to the array.

When it finishes splitting, our variable SplitName will be an array. You can access all the "pieces" in the array by referring to the index number. You can do it very simply, like this:

SplitName[0]
SplitName[1]

Or you can use a loop, like this:

for (num = 0; num < SplitName.length; num++) {

document.write(SplitName[num])

}

The length of SplitName is how many slots in the array - the length of the array, in other words.

We'll do it the simple way, because we know we only want to manipulate a first name and a second name.

fname = document.f1.t1.value
sname = fname.split(" ")

first = sname[0]
second = sname[1]

So first will now hold the first name from the text box, and second will hold the surname from the text box.

Before we go any further, a function related to split() is join(). The join function will join together strings in an array. The syntax is this:

arrayname.join(separator)

Here's an example of how to use it:

aryText = new Array("This", "is", "some", "text")

t1 = artText.join()
t2 = artText.join(" ")
t3 = artText.join(" - ")

The empty round brackets of t1 gets you a comma as a separator (the default); the t2 puts in spaces as a separator; the t3 puts in a minus sign as a separator. So the three variables will now be this:

t1 = This, is, some, text
t2 = This is some text
t3 = This-is-some-text

But back to our little programme. We have just got the first and surnames and put them into variables. Now what? Well, we now have to chop our two names up a bit. Remember: we're swapping the first two characters of each name. We'll do them one at a time. Let's chop the first name up.

 

substring()

We need to grab the first two characters of our first name, and separate them from the rest of the name. We can use the function substring() to do this.

first1 = first.substring(0, 2)
first2 = first.substring(2, first.length)

The syntax for substring() is this:

stringname.substring(indexA, indexB)

After typing the string you want to manipulate, you type a full stop. The name of the function comes next: substring(). In between the round brackets, you need two numbers: where you want to start the search (IndexA), and where you want to end the search (IndexB). Look at how we used the function:

first1 = first.substring(0, 2)

So we're saying, "Search the variable called first. Start the search at position zero (zero is the first character of the string). End the search at position 2." The function will then strip the characters specified and put them into the variable first1. So, if we started with the first name of "Bill", the code above would put "Bi" into the variable first1.

To get the rest of the name, we did this:

first2 = first.substring(2, first.length)

Now, we're starting the search from position 2. We're ending at the length of the variable first. Again, if we started with the first name of "Bill", the code above would put "ll" into the variable first2.

You can use substring() to strip character from right to left, instead of left to right as we did. All you need to do is make indexB a smaller number than indexA. So if we did this:

first1 = first.substring(2, 0)

the function substring() would start the search on the right hand side, at character zero. It would then grab characters up to indexA, which is set at two above. In other words, it would grab two characters starting from the right. Had it been 5, 0 it would grab five character from the right.

OK, we've found a way to chop our first name up. We can do the same for the surname:

second1 = second.substring(0, 2)
second2 = second.substring(2, second.length)

The only thing left to do now is joined the jumbled pieces together and display the result in the text box:

fname = second1 + first2 + " " + first1 + second2

document.f1.t1.value = fname

The entire code for our jumble() function is then this:

function jumble() {

fname = document.f1.t1.value
sname = fname.split(" ")

first = sname[0]
second = sname[1]

first1 = first.substring(0, 2)
first2 = first.substring(2, first.length)

second1 = second.substring(0, 2)
second2 = second.substring(2, second.length)

fname = second1 + first2 + " " + first1 + second2

document.f1.t1.value = fname
}

Add it to your web page and test it out. When Bill Gates is entered into your text box, you should get "Gall Bites" when the button is clicked.

Move on to the Next Part-->

<--Back to the JavaScript Contents Page