While JavaScript has many applications, working with string values is one of the most popular. Strings are objects within the JavaScript language. They are not stored as character arrays, so built-in functions must be used to manipulate their values. The functions provide various ways to access the contents of a string variable. Let’s take a closer look at these functions.
Everything included
Manipulating string values is a common developer chore. This ranges from extracting portions of a string to determining if a string contains a specific character. The following JavaScript functions provide developers with everything they need:
- concat() – Combines the text of two or more strings and returns a new string.
- indexOf() – Returns the starting index of a substring within another string. A –1 is returned if no match is found.
- charAt() – Returns the character at the specified location.
- lastIndexOf() – Returns the index within the string of the last occurrence of the specified value, or -1 if not found.
- match() – Used to match a regular expression against a string.
- substring() – A portion of a string is returned. A starting and ending location are passed to this function.
- replace() – Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.
- search() – Executes the search for a match of a regular expression. If successful, search returns the index of the match inside the string. Otherwise, it returns -1.
- slice() – Extracts a section of a string and returns a new string.
- split() – Splits a string into an array of strings by separating the string into substrings.
- length() – The length of the string is returned as the count of the number of characters it contains.
- toLowerCase() – Converts the entire string to lower case.
- toUpperCase() – Converts the entire string to upper case.
Note: The concat, match, replace, and search functions were added in JavaScript 1.2. All other functions are available in JavaScript 1.0.
Let’s take a closer look at how each may be used in your JavaScript code. Listing A contains a sample of each function listed.
You receive the following values when this code is executed:
Tony Patton
Character Found!
The last index of n is: 10
Match found: Tony
Please salute General Patton
String not found
Patton
Tony
Patton
GENERAL PATTON
general patton
The example code combines all of the functions to provide an idea of their functionality.
Special characters
In addition to the functions, there are numerous special characters that may be used to represent key effects. These characters include the following:
- \t – tab
- \b – backspace/delete
- \r – carriage return
- \n – newline
- \f – form feed
The most common purpose of special characters is formatting output. For instance, you may need to include a line break to properly display a value. Also, a carriage return is needed to place data on separate lines. On some platforms, “\n” will suffice but “\r\n” is required to display a line break properly on all machines. The following sample displays the special characters in a multi-line window:
var output = null;
output = “Special Characters”;
output += “\n”;
output += “===============”;
output += “\n”;
output += “\\t – tab”;
output += “\n”;
output += “\\b – backspace/delete”;
output += “\n”;
output += “\\r – carriage return”;
output += “\n”;
output += “\\n – newline”;
output += “\n”;
output += “\\f – form feed”;
output += “\n”;
alert(output);
The previous example takes advantage of string concatenation using the plus symbol as opposed to the concat function. The reason is simple; the concat function requires a new variable for each operation, whereas the addition method simply extends the existing value. In addition, the sample uses the escape character to properly display the special characters. The system treats a backslash (\) as a signal for a special character to follow, but back-to-back backslashes negate this operation. Each character in the output is placed on its own line by way of the newline special character.
Adding to your toolbox
The special characters and functions may be combined with other JavaScript techniques to solve a variety of problems. One area where JavaScript shines is client-side form validation, and the techniques presented in this article may be easily used to provide validation.
The following code is called when a form is submitted. The form contains three fields: name, address, and zip code. To keep it simple, we need to verify that each field is not empty and the zip code is numeric. The JavaScript in Listing B handles this task.
The function is called when the user submits the form. This may be handled with an HTML button’s onSubmit event:
<input type=”button” type=”submit” value=”submit” onClick=”validation()”>
The validation function checks each field for empty values. If an empty value is found, test is appended to the validation message. In addition, a regular expression is used to validate the format of the zip code field. In this case, we only accept five-digit U.S. zip codes. An error message is displayed only if errors were discovered (msg variable is not empty); otherwise, the form is submitted.
A powerful language
JavaScript has matured into a full-featured language that makes it possible to build powerful applications. It is the perfect complement to the disconnected nature of the Web interface, making it possible to perform many client-side operations without a trip to the Web server.
