String Functions

The String object comes with a wide array of methods that very few programmers exploit to their full extent. There are methods for manipulating strings, generating HTML tags and searching within strings.

What is a string?

In the JavaScript language strings are objects in their own right. As in Java, they are not stored as arrays of characters so string manipulation must be done using the built-in constructor and mutator functions. In later versions there is a String constructor and a more formalised idea of what these objects are. At this level however a string is any variable made up of alphanumeric characters but not a number.

For example, some valid strings are "Hello", "Bob", "Bob2", "33", "33.3" but not 33 or 33.3. You will have seen a detailed discussion on converting between strings and numbers in the chapter on Data Types in JavaScript. All strings have a property called length that returns the number of characters in the string.

The most commonly used methods used on string objects are: indexOf(), charAt() and substring(). Because these appear so often in JavaScript programs I will try to explain them in detail below.

indexOf()

This function allows you to determine if and where a string appears in a larger string. It is equivalent in part to strstr and related functions from C and InStr from Visual Basic. This method also has a counterpart lastIndexOf() that searches from the other end of the string.

As the name suggests, the return value indicates the position of the string searched for in the string searched over. If there is no match then the value -1 is returned. Remember that in JavaScript -1 is simply an integer and should not be referred to as a boolean.

Remember that arrays in JavaScript all start from 0. The same goes for string indices so even though "a" is the second character, the return value is 1.

You may be wondering now, how you could find the index of the second occurence of the letter "a"? To do this we have to introduce the second parameter of the function. The second parameter is an integer indicating the position to start searching from in the string.

By combining all these features I can modify the code to find all occurences of the letter "a":

The index variable is initially set to the first location of "a" (or -1 if there is no match). Each time through the loop we search for another match starting from just after the first match (index + 1). When there are no more matches in myString the search returns -1 and the loop exits.

The output of this is a series of alerts: 1, 5, and 13.

In this example we have only shown that indexOf() can search for single characters. By experimenting you will find that the search parameter can be any character or string.

charAt()

This function returns the character at a given position in the string. It is essentially a special case of the substring() method below but useful in its own right. If you are converting code from C or a similar language then you will be able to replace string[index] with string.charAt(index) when referencing a character.

On place where charAt() is commonly used is to check for illegal characters in a form input. For example an email address should be restricted to letters, numbers, periods and an "@" symbol. We can parse a string one character at a time to enforce this:

Working Example

The example above uses a number of string functions as well as a loop and some boolean operators. All of these features have been previously covered individually apart from the toLowerCase() function which is described below.

The method is quite simple, to test each character in the email address against a set of valid characters. However the implementation will seem a bit awkward if you are used to C or Perl programming. Essentially, we loop through the email using charAt() to extract individual characters. We then check to see if each character is valid.

If the character is valid then we continue the loop (jump back to the for statement). If the character is not valid (does not appear in the validchars string) then we display an alert with that character and use break to end the for loop after setting parsed=false.

When the loop exits we check the flag to see if the email has been validated. If parsed is true then a message is displayed. Note that we do not have to test (parsed == true) - this would still work but is unnecessary for boolean variables.

substring()

This function is used to extract any portion of a string. The parameters are 'start' and 'end'. The start value is the index of the first character to return. The end value is the index of the first character after the portion to return. This may seem illogical but an easy way to remember it is that the length of the returned string is end - start.

If the second parameter is omitted then the end point is taken to be the last character in the string.

The second example in this table demonstrates how the parameters are automatically reversed if start > end. While an interesting feature, this SHOULD NOT be relied on as JavaScript 1.2 will return an out of memory error in such cases. The last example shows that when the start and end are equal, the return value is the empty string.

String Formatting (HTML)

These have got to be some of the least-used functions in JavaScript. While not exceedingly useful they do add a certain panache to your code. These methods create HTML code from string objects for displaying on the page.

The last two examples in the above table are not specifically HTML related but may be useful as formatting tools. All of these methods may be applied in series to a string in order to create a custom format.

JavaScript Date InputString to Object:
function ConvertDateStringToDateObj(StringIn){
var x = StringIn.split('/');
var Objout = new Date(x[2], x[0]*1-1, x[1]);
return Objout;
}// end ConvertDateStringToDateObj(StringIn)

function ConvertDateObjToDateString(ObjIn){
var x = ObjIn.getMonth()*1+1+ "/" + ObjIn.getDate() + "/" + ObjIn.getFullYear();
return x;
}// end ConvertDateStringToDateObj(StringIn)