To get started with advanced string handling in JavaScript, we will begin by looking at two of the JavaScript methods for strings. These two methods, charAt and indexOf, are used to find out what character is at a certain position in a string and to find out where a character or a smaller string begins within a string, respectively. Before we get to those, we will also want to look at the length method. This gives us the length of a string, which may be helpful when we use the other methods. So, let's go in and take a look at these methods, starting with length.

length

The length method returns the length of a particular string as a number. For instance, if a string is 5 characters long, the length method would return the number 5. To use the method, you will want your string to be placed in a variable. For this example, we will simply assign a string to a variable:

var my_car="Ferrari";

Now, to use the length method, we use the dot operator (.) as the connection. First, we use the variable name. Then, we follow the dot operator with the word "length", which will return the length of the string:

my_car.length

Of course, if we want to use the value it returns, we can assign it to a variable:

var how_long=my_car.length;

In this case, the variable how_long will have a value of 7, since the word "Ferrari" has seven characters. The length method is even more useful if you are using a value entered by a viewer at a prompt or another input area and do not know what the string is. Using this, you can find the length and use it for other purposes, such as showing an error message for strings that are longer than what you want them to be- for example:

<SCRIPT language="JavaScript">
<!--
function getname()
{
var yourname=prompt('Enter your name, NOW!','');
if (yourname.length > 10)
 {
  alert('That name is just too long, give me a shorter one!');
  getname(); 
 }
else
  alert('Hi '+yourname+'!');
}
//-->
</SCRIPT>

Give it a try with the link below. If you enter a name longer than 10 characters you get an error alert. Otherwise, you get a greeting alert!

Example: Give me your name!

charAt

Using the charAt method, you can find out what character is filling a designated position within a string. Basically, it allows you to find out what character is first, second, third, and so on. The important thing to remember is that when dealing with the position of a character, the count starts at zero, not one. So the first character is actually at position zero.

As with the length method, we assign the string to a variable, and then use the dot operator to call the charAt method. The charAt method takes an argument, which is the position number for the character it should return. So, if we want to find the first character in our "Ferrari" string, we would do it this way:

var my_car="Ferrari";
var the_char=my_car.charAt(0);
alert('The 1st character is '+the_char+'.');

This would give us an alert telling us that "The first character is F." We can do the same by sending the number 1 as the argument to get the second character, or sending the number 2 to get the third character, and so on.

As for the last character, we can use the length method from above to find out what character is in the last position in the string. Remember, though, that the length function returns the number of characters. The positions start with 0, but length starts counting at 1. So, to get the position of the last character we must use length-1. "Ferrari" has a length of 7, but the last position (count up from 0) is actually 6. That is why length-1 will get you the number for the last position! Here is a little sample:

var my_car="Ferrari";
var the_length=my_car.length;
var last_char=my_car.charAt(the_length-1);
alert('The last character is '+last_char+'.');

This time, you will get an alert telling you that "The last character is i." This is fun, isn't it?

indexOf

Now we get to the really fun method of indexOf. This method lets you check for a character or even a small string within the current string, and returns the position at which your character or string begins. Again, remember that the position starts counting at 0, so if indexOf returns zero, it means your character or string begins at the 1st character. Also, indexOf has a useful return value of -1 if the character or string you searched for is not contained within the string. And finally, if the character or string you search for occurs more than once, indexOf returns only the first appearance of your character or string.

First, let's find the 'a'. No problem, again we use the dot operator. IndexOf also takes an argument like charAt does, but this time the argument is the character or string we are looking for:

var my_car="Ferrari";
var where_is_a=my_car.indexOf('a');
alert('The a is at position '+where_is_a+'.');

Notice the quote marks around the argument of a. This tells the browser to look for that string, which is the type of argument you must send for indexOf to function properly. This code will send back the position of the letter a. The alert will say "The a is at position 4." Look out letter a, you have been found!

Let's now look for the letter 'r' in "Ferrari". As you can see, 'r' is in the string three times. However, only the first appearance will be returned, at position 2.

var my_car="Ferrari";
var where_is_r=my_car.indexOf('r');
alert('The r is at position '+where_is_r+'.');

Now the alert says "The r is at position 2." The other r's at positions 3 and 5 are not the first, so they are not returned.

What about if we search for something that is not there? Well, indexOf will return a -1. We can use this -1 to tell us that what we are looking for is not there. This can be helpful when you ask a viewer for information, but the viewer does not type the information with a required character or set of characters. For instance:

function get_url()
{
var your_url=prompt('Enter your web page URL!','');
var is_protocol_ok=your_url.indexOf('http://');
if (is_protocol_ok==-1)
 { 
  alert('Error: Your url should begin with http://');
  get_url();
 }
else
 alert('Thanks!');
}

This one checks to be sure the viewer entered the http:// part of the address. If not, it shows the error alert and gives the viewer a chance to enter the url again. Of course, you can cut down on the number of forgotten http:// beginnings by using http:// as the default value for the prompt instead of nothing:

var your_url=prompt('Enter your web page URL!','http://');

Of course, the viewer could delete it by accident (or even on purpose), so the check would still be worthwhile. You could even go a step further and be sure that there is at least one dot (.) in the address as well. This way, the viewer would need to have a string plus a dot and hopefully a com or net afterward ( like http://pageresource.com ). We can also check for the http:// as well, here is a sample:

function get_url()
{
var your_url=prompt('Enter your web page URL!','http://');
var is_protocol_ok=your_url.indexOf('http://');
var is_dot_ok=your_url.indexOf('.');
if ((is_protocol_ok==-1) || (is_dot_ok==-1))
 { 
  alert('Error: Your url should begin with http:// !');
  get_url();
 }
else
 alert('Thanks!');
}

Of course, it is still not going to totally eliminate mistakes or bad urls, (someone could just enter http://.) but it helps a little bit.

As you can see, these methods can be quite useful when dealing with strings. Hopefully you will find a great way to use them for your site!