Javascript Tutorial -- String Properties

In Lesson 3, we introduced variables in Javascript. What we didn't tell you in Lesson 3 is that a variable that contains any kind of text information, like...:

        ...
        var MyVar = "Hello, world!"
        ...
      

...is actually a "string object". This is good news for you, the Javascript developer, because string objects have a number of built-in methods that make it really easy to massage your data.

Suppose, for example, that you want to know how many characters of data are contained in your variable. This is actually a pretty common task in programming -- there are a number of times when you want to extract a subset of the letters or words in a string, and so you need to know how long your data is before you can begin searching through it. Fortunately, Javascript includes the "length" method in the string object. Here's how you use it:

        <string type="text/javascript">
          <!--
            //Composing this sentence was harder than I expected...
            var MyVar="This sentence contains forty-five characters."
            var Length=MyVar.length

            document.write("<br>")
            document.write(MyVar + " is " + Length + " characters long.")
            document.write("<br>")
          //-->
        </script>
      

Suppose you wanted to separate individual fields out of the data inside a variable in your script, like perhaps words in a sentence or columns from a spreadsheet saved as a CSV file (separated by commas). This is an easy task for Javascript, using the "split" method. The following example uses the split method to separate words in a sentence:

        <script type="text/javascript">
          <!--
            var MyVar = "How many words are there in this sentence?"
            var Words = new Array()
            var i

            Words = MyVar.value.split(" ")
            document.write(MyVar + " contains " + Words.length + " words.<br>")

            for(i = 0; i < Words.length; i++)
              {
                document.write("Word " + i + " is " + Words[i])
              }
            document.write("<br>")
          //-->
        </script>
      

Another common task is searching a string object for a specific pattern, and returning the location of the pattern within the variable. Javascript includes the method "indexOf" for this purpose. For example...:

        <script type="text/javascript"
          <!--
            var MyVar = "This is an example of the indexOf method."
            var Pos = MyVar.indexOf("is")

            //Pos will equal *two* because "this" contains "is"
            document.write("<br>Found 'is' at position " + Pos)
          //-->
        </script>
      

OK, that was easy enough. But what happens if the pattern you are searching for exists more than once in your string object? In this case, indexOf will return the first occurrence of the pattern. So how do you continue to search the string object for the next occurrence? In this case, you will need to pass indexOf a second parameter, an offset from which to search. So once you have obtained the position of the first occurrence of the pattern, you can use it as an offset to start your second search from. Here is a modification of the example above that will find the second occurrence of "is" in the data stored in MyVar:

        <script type="text/javascript"
          <!--
            var MyVar = "This is an example of the indexOf method."
            var Pos = MyVar.indexOf("is")

            //We will use Pos as an offset for the indexOf method
            //to find the second occurrence of "is".  However,
            //we must increment Pos by 1, or it will return 2 again.
            Pos = MyVar.indexOf("is", (Pos + 1))
            document.write("<br>Found 'is' at position " + Pos)
          //-->
        </script>
      

What if you search for a pattern that doesn't exist in your data? In that case, indexOf will return a value of -1.

This has been a really long lesson, but we're not quite done yet. The two last methods I would like to cover are the "substring()" and "substr()" methods. These methods returns a portion of the data contained in the string object. substr() expects two parameters: the first is the index from which to start searching, and the second optional parameter is the number of characters to return. Like substr(), substring() expects two parameters. Again like substr(), the first parameter is the position from which to begin searching, and the second parameter is optional. While the second parameter in the substr() method is the number of characters to extract, the second parameter in the substring() method is the index of the last character to extract. If the offset parameter is negative, both substr() and substring() will search backwards from the right of the variable. For example:

        <script type="text/javascript">
          <!--
            var MyVar = "This is an example."

            //This will print "is an example."
            document.write("<br> + MyVar.substr(5) + "<br>")

            //This will print "is an ex"
            document.write("<br> + MyVar.substr(5,7) + "<br>")

            //This will print "is"
            document.write("<br> + MyVar.substring(5,7) + "<br>")
            //This will print "example"
            document.write("<br> + MyVar.substr(-9,8) + "<br>")
          //-->
        </script>
      

Here is a script demonstrating some of the string properties.