Pin Me

JavaScript indexOf: Explanation & Examples

written by: Sam OBrien•edited by: Amber Neely•updated: 9/13/2010

Use of the javascript indexOf method will allow you to search strings which can be useful in the detection of browsers. Learn the basics with this introduction.

  • slide 1 of 3

    What Is the Javascript indexOf Method?

    The ability to search strings is extremely important in many scripts and full programs. You should understand what a string is before attempting to search one. Simply put, the Javascript indexOf method is a way for you to be able to search for a specific character or chain of characters in a string. You might think of it as searching strings for a specific string.

    Why would you need to do this? There are a number of reasons why you might want or need to search a string. For example, you can actually search the navigator.appName property to discover the specific browser a visitor to a website is using. Using a combination of the Javascript indexOf and lastIndexOf methods permits you to do just that. Perhaps you need to search specific names or phrases in a text. Think of the search feature built in to word processors and text editors. Being able to search strings is extremely useful.

    It's always a good idea to simply practice a method before using it in your scripts which is what I demonstrate here in the script of few lines I've written to demonstrate use of the Javascript indexOf method. Simply click on the screen shot below to view the code as you learn from the explanation of each line.

  • slide 2 of 3
  • slide 3 of 3

    How to Use the Javascript IndexOf Method

    You'll want to be sure to first understand how characters in a string are counted. Javascript starts counting at zero; so, in the string "go now," the letter "n" is in the third position (spaces are counted). The letter "g" is zero, "o" is number one, the space is number two, and the "n" is number three.

    The first lines of the script are just basic HTML tags with which you should already be familiar. I didn't bother to declare a document type as there's no need for this script to be validated because it isn't live. Use of the CDATA section is out of habit since I always validate live web pages. You see that I've declared and initialized two variables: msg1 and msg2; both are obviously strings. I then used the Javascript indexOf method in the very next section of code written to print the results (document.write).

    The syntax is simple: "String to be searched".indexOf ("character or sequence of characters sought"). For example, in the script I searched for "g" in the string "This is a message." You can see the syntax in my document.write statement ("This is a message".indexOf("g")). I also show practice with the variables msg1 and msg2 in my second document.write statement. However, notice that the use of the Javascript indexOf method used on msg2 includes a second parameter, a startIndex. The startIndex tells the script the exact position in the string from which to start the search. Now, you should be able to figure out the exact positions (numbers) returned when I ran my script. Three strings are involved, two are variables. The results returned were: 18, 3, and 24. The "g" is returned as 18 in the string, "This is a message." The "c" is returned as 3 in the string of the msg1 variable, and the "s" is returned as 24 in the string of the msg2 variable. Remember, I used the startIndex as an optional second parameter with msg2, so the program started counting not at zero, but rather at position number 23.

    There's also a lastIndexOf method that can be used to search strings starting at the end of a specified string instead of at the beginning. The method works backwards. You might want to become comfortable with the Javascript indexOf method and use of the optional startIndex before working with the lastIndexOf method.