Javascript Strings - substr

Five part section: 1 2 3 4 5

Sometimes, you want to grab characters from a string. For example, you can grab the last four letters from an email address and see if they end in .com. You can do this with the Javascript method substr.

The substr method needs at least one number between its round brackets. This is the position you want to start your search. Optionally, you can add a second number after a comma. This is how many characters you want to grab. If you don't include the second number then Javascript will grab all the characters from your starting position right to the end of the string. Examine the following code:

var email = "meme@meme.com";
var ending = email.substr( 0, 4 );
document.write(ending);

This code grabs 4 characters from the email address, starting at position 0. (Position 0 is the first character in a string.) If you miss out the comma and the 4 but keep the 0 then substr will return all of the email address.

You can start grabbing character from the end of string by typing a negative number. So -4 means grab 4 characters from the end of the string. Here's an example:

var email = "meme@meme.com";
var ending = email.substr( -4 );
document.write(ending);

This grabs the last 4 characters from the email address, which are .com.

A popular use for substr is to cycle through all the letters in a string. In Javascript code previously we checked for an @ sign. But what if the user enters more than one @ sign, in an attempt to deceive us? If we use indexOf it will only tell us the position of the first occurrence of the @ sign. It will stop when it finds just one. By using a loop, an IF statement, and substr, you can go through all the letters of the email address, counting how many @ signs there are. Take a look at this code:

var at_sign = "@meme@meme@.com@";
var counter = 0;
var i;

for ( i=0; i < at_sign.length; i++ ) {

var char = at_sign.substr( i, 1 );

if (char == "@" ) {

counter++;

}

}

document.write("number of times @ appears is: " + counter);

We've set up the email address to have 4 @ signs. We've then set up a counter variable and a loop variable called i. All strings have a length property, which is how many characters a string has. So the first line of our for loop can be this:

for ( i=0; i < at_sign.length; i++ ) {

We're looping until the variable called i is no longer less than the length of the email address stored in the at_sign variable. The i variable increases by 1 each time round the loop. We can use that fact in our substr method:

var char = at_sign.substr( i, 1 );

The first time round the loop the i variable will have a value of 0. So substr will be substr(0, 1). This means start at the first character in the string and grab 1 character. The second time round the loop the i variable will have a value of 1. So substr will be substr(1, 1). Which means start at the second character and grab 1 from that point. Next will be substr(2, 1), which grabs the third character from the email address.

We keep going round and around grabbing 1 character at a time with substr. The IF statement checks if this character is an @ sign. If it is, the counter will get 1 added to it.

So if you need to check every character in a string, study the use of substr above.