How to use some of the javascript methods for taking apart string variables and
working with them. This two-part tutorial takes you through charAt, indexOf, and
the split method.
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!
|