![]() ![]() ![]() ![]() |
![]() |
Chapter Seven Doing Stuff with Strings |
String Manipulation: The Single Most Important Skill You'll Learn It is probably difficult for the beginning programmer to fathom just how important string manipulation is. It does sound boring, doesn't it? But strings are the heart and guts of nearly every script you'll put together. You'll use strings to assemble data input from the visitor to your site, to format HTML you wish to display on the visitor's screen, to read in data from a database, etc. The scripts for this chapter are designed to give you examples of the various methods of "picking apart" and "putting back together" of strings using the string manipulation calls. variable1=variable2.charAt(x); This built-in call of JavaScript tells you the character at any position you wish in a selected string. variable1 is a string that will be set equal to the character at position x in the string you have defined as variable2. variable2 is any literal string or a variable you've set equal to a string that you want to search in. x is any whole number literal or numeric variable you've set equal to a whole number from 0 to the length of your string less one. Things to Remember: Characters in any string are counted from left to right. But you do not count from one. The position of the first character is 0, and the position of the last character is the length of the string minus one. If the position you supply is out of range (less than zero or greater than the string length minus one) JavaScript returns an empty string. Why is the highest number the length of the string minus one? Because you begin counting with 0 instead of one:
The following example displays characters at different locations in the string "Now is the time". This code snippet would result in: And another example: This code snippet using our variable named "chr" would result in: You do not need to use a variable string to find the character at a particular position. You can also use a literal: This code snippet using a literal string would also result in: What happens if you ask for the character at a position past the end of the string? This code snippet would result in: Why? Because 15 is out of range. Whenever you ask for a character at a position not existing in the string, the variable will be set to "" (empty, or nothing) x=variable.indexOf(var,y); This is a very important built-in call that you will use many times in your own scripts. It permits you to find out if a word exists in a sentence, for example, and where it is, if it does. In conjunction with the built-in .substring(); call you can take apart sentences and rewrite them, check to see what information was entered in a form, etc. variable is any literal string or a variable you have set equal to a string. var is a literal string or a variable you have set equal to a string comprised of the single letter, group of letters or word you are looking for in variable. y is the position in variable where you want the search for your characters to begin. It can be any literal whole number or a variable you have set equal to a whole number from 0 to the length of variable minus one . Timesaver: The y does not have to appear in the .indexOf(); call. If you leave it out, the call will start looking at the first character of variable (position 0). Characters in your string are counted from left to right. The position of the first character is 0, and the position of the last character is one less than the length of your string. You don't need to include a value for position for most searches, since you nearly always will be searching the whole string and JavaScript will assume you mean 0 for position if you don't place a value in y. If your var group is not found in variable, you will get back a value of -1, that is, x will be set equal to -1. Here's a little script that uses both the .charAt(); and .indexOf(); calls: Click Here to See This Script. x=variable.lastIndexOf(var,y); This built-in call of JavaScript is exactly like the .indexOf(); call, above, but works backwards (i.e., from the end of variable toward the beginning. variable is any literal string or a variable you set equal to a string. var is a literal string or a variable you set equal to a string of the single letter, group of letters or word you are looking for in variable. y is the position in variable that you want the search for your var to begin. It can be any literal whole number from the length of variable -minus-one to one. The following simple examples use the .indexOf(); and .lastIndexOf(); calls to locate values in the string "Now is the time". This code snippet would result in: Here's another code snippet: This code snippet would result in: Yet another example: This code snippet would result in: Why? Because "the" is not found beginning at position 8 to the end. Here's an example where it is found: This code snippet would result in: 12 being the position of the last "i" in our search string. Another example: This code snippet would result in: And a final example: This code snippet would result in: Take note that even when reading backwards from the end of the string, the returned position is counted from the beginning of the string, again with the count commencing with 0. variable1=variable2.substring(x,y) You'll almost always use this built-in function of JavaScript in conjunction with the indexOf();, .lastIndexOf(); and .charAt(); calls that you have just learned something about. This is how you harness the power of JavaScript to take database information in very long strings (30k or more) and find specific pieces of information in those strings. Or to take form data entered by a visitor to your pages and pre-process it before sending it to a server .cgi script for recording in files. variable1 is any variable you wish to name to accept the results of this call. variable2 is any string literal or variable you have set equal to a string that you wish to parse apart. x and y are any literal whole numbers or variables you have set from 0 to the length of the string minus one. How it works: Just as with .indexOf();, .charAt(); and .lastIndexOf();, the characters in any string are counted from left to right. The position of the first character is 0, and the position of the last character is the length of the string minus one. So, once you have grasped the concept for any of these built-in calls you understand the others, including the .substring(); call. When you have determined the portion of the string you wish to read into variable1, you may grab that substring portion without worrying whether x is less than y. If your x is less than your y, the .substring(); function returns the portion starting with the character at x and ending with the character before y. If x is greater than y, the substring function returns the portion starting with the character at y and ending with the character before x. Now, if you re-read the prior two paragraphs very carefully, you will see that the resulting substring is identical! So, the upshot of all that gobbledy-gook is this: ya don't have to worry about which is less or perform any tests to find out. If x is equal to y, the .substring() call returns an absolutely empty string. Why? Because you have specified a substring commencing at the first number and ending before the second number, and since they are equal, nothing's left! The following example uses the .substring(); call to display characters from the string "Now is the time". This results in: OK. Now let's take a look at a script that makes use of the .substring(); call to "pick apart" and "reassemble" some strings. This is an important call to get your head around, because you will be using it all the time for database retrieval and screen display, etc. Click Here to See This Script. variable1=variable2.toLowerCase();
Whenever you are doing searches using JavaScript, you will find these calls extremely important. Why? Because searches are case sensitive. If you search a string for the word "now" and the word "Now" is in that string, you will not find it. Thus, for databases you will be using, you may find it useful to store them either as all upper case or all lower case just to save yourself the additional line of JavaScript to convert that data to either all upper or all lower case. But in either instance, if you are relying upon form data entered by the visitor to your site, you will need to use one of these calls to insure that a valid search doesn't fail due to case insensitiveness. variable1 is any variable you decide upon to receive the results of these calls. variable2 is any literal string or variable you have set equal to a string which contains (perhaps) both upper and lower case letters. This will result in the following: x=variable.length; Although I've included the .length call in this section on string parsing, since it is used most often in that context, this call is useful in a number of other contexts as well. >x is a numeric set equal to the length of what-ever you want to determine the length of. variable may be a string you wish to know the length of, or any of the following: forms - how many different forms?
.length is always a read-only property. For a null string (a string equal to "") length will be set to zero. In the following example, the getSel(); function uses the length call to iterate over every element in the "a" array. "a" is a select element on the "isn" form. and using this form: variable=document.location This call sets variable equal to the entire URL (or file pathname when run locally) It is a read-only call, i.e., you can't change location with this call. To change location, will change the location. Don't let the similarity of these calls confuse you. The following example displays the URL of the document presently on screen: ISO LATIN-1 Character Set Finally, some very esoteric scripts that you write may require ASCII encoding in the ISO Latin-1 character set. (I doubt it, though) However, on the off chance that this is something you'll want to do, the final two calls in this chapter are provided in the interests of completeness. Skip them if you can! variable1=escape(variable2); This call sets the variable1 you specify equal to the ASCII encoding of a character (variable2) you also specify in the ISO Latin-1 character set. variable2 is any literal character or variable you have set equal to a character that is not part of the lower case or upper case alphabet or a number. If you do mistakenly set variable2 to an alpha-numeric, it will not error out on you, but will simply set variable1 equal to that self-same alpha-numeric. variable1 will be set in this form: "%xx", where xx is the ASCII encoding of variable2. This code snippet: Would result in the following: variable1=unescape(variable2); This call sets the variable1 you specify equal to the character in the ISO Latin-1 character set that corresponds to the ASCII characters in variable2. variable2 is any literal characters or variable you have set equal to characters that is not part of the lower case or upper case alphabet or a number. If you do mistakenly set variable2 to an alpha-numeric, it will not error out on you, but will simply set variable1 equal to that self-same alpha-numeric. variable2 should be set in this form: "%xx", where xx is the ASCII encoding of variable2. This code snippet: Would result in the following: |