Bookmark and Share

JavaScript String indexOf

Ever want to find something in one of your JavaScript strings? Maybe even start your search halfway through the string? Well you're in luck! The string function indexOf lets you supply one required argument (the search query) and one optional argument (the offset) for all your simple searching needs.

Advertise on Tizag.com

If you are looking for a more powerful search feature, you should check out JavaScript's string search function, which has support for regular expressions, but not offsets.

String indexOf Function

As we mentioned above, indexOf has two arguments, with the second one being optional:

  1. SearchString - What you would like to search for.
  2. Offset (optional) - How far into the string you would like the search to begin. If you want to search the whole string, omit this argument.

indexOf Function Example

To start off with, we will be finding the position of the "www" in a typical URL string. The indexOf function will return the location of the first match that it encounters.

JavaScript Code:

<script type="text/javascript">
var aURL = "http://www.tizag.com/";
var aPosition = aURL.indexOf("www");

document.write("The position of www  =  " + aPosition); 
</script>

Display:

If you'd like to follow along with how this function does it's counting, here's a complete breakdown:

  • h - 0 - no match
  • t - 1 - no match
  • t - 2 - no match
  • p - 3 - no match
  • : - 4 - no match
  • / - 5 - no match
  • / - 6 - no match
  • w - 7 - maybe match
  • w - 8 - maybe match
  • w - 9 - It's a match, return the position of the start of the match (7).

Let's see what happens when we add another www to the URL string to see if this function gets confused or not.

JavaScript Code:

<script type="text/javascript">
var aURL = "http://www.tizag.com/www.html";
var aPosition = aURL.indexOf("www");

document.write("The position of www  =  " + aPosition); 

</script>

Display:

Looks like it returned the position of the first "www", just as we expected, so there are no surprises in this function. However, what would we do if we wanted to find the second "www"? Well, we'd have to use an offset, for starters.

indexOf Function Offset Example

If we use the indexOf function to find the first "www", then we can use that position + 1 as a way to skip the first "www" and find the second.

JavaScript Code:

<script type="text/javascript">
var aURL = "http://www.tizag.com/www.html";
var aPosition = aURL.indexOf("www");
var secondPos = aURL.indexOf("www", aPosition + 1);

document.write("The position of www  =  " + aPosition); 
document.write("<br />The position of the second www  =  " + secondPos); 

</script>

Display:

By using an offset of 8 (7 + 1), we were able to skip the first "www" to instead find the second. In case you're interested in what the function was actually looking at after we gave an offset, we have it below:

  • ww.tizag.com/www.html

There are only 2 w's left at the beginning of the string, due to the offset, making it impossible for a match to be found at the first set of "www".

Bookmark and Share




Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

Advertise Here

More Tutorials!
Microsoft Office Tutorials Artist Tutorials