Javascript string equality

javascript add strings together and javascript string begins with
GregDeamons Profile Pic
GregDeamons,New Zealand,Professional
Published Date:03-08-2017
Your Website URL(Optional)
Comment CHAPTER 1 Working with JavaScript Strings 1.0 Introduction JavaScript strings are the most important component of JavaScript, probably used more than any other data type. Though you may get numeric values from web page forms, the values are retrieved as strings, which you then have to convert into numeric values. Strings are also used as parameters when invoking server-side application calls through Ajax, as well as forming the basic serialization format of every JavaScript object. One of the methods that all JavaScript objects share is toString, which returns a string containing the serialized format of the object. A String Primitive A JavaScript string can be both a primitive data type or an object. As a primitive type, it joins with four other JavaScript primitive types: number, Boolean (true or false), null (no value), and undefined (unknown). In addition, as a primitive data type, strings are also JavaScript literals: a collection that includes numbers (as either floating point or integer), the literal format for arrays, objects, and regular expressions, as well as numbers and Booleans. We’ll see more about the literal formats for the various JavaScript ob- jects throughout the book. A string is zero or more characters delimited by quotes, either single quotes: 'This is a string' Or double quotes: "This is a string" 1 Download from Wow eBook There is no rule for which type of quote to use. If you’re including single quotes within the text, you’ll most likely want to use double quotes: "This isn't a number." If you mix up the quote types—begin a string with a single quote and end with a double—you’ll receive an application error: var badString = 'This is a bad string"; // oops, error Both quote types are used interchangeably in the book. A String Object A string object is called String, appropriately enough, and like all other JavaScript objects has a set of properties that come prebuilt into the object type. A String object can be instantiated using the JavaScript new operator, to create a new object instance: var city = new String("St. Louis"); Once instantiated, any one of the available string properties can be accessed on it, such as in the following code, where the string is lowercased using the String object method toLowerCase: var lcCity = city.toLowerCase(); // new string is now st. louis If you access the String constructor without using new, you’ll create a string literal rather than a String object: var city = String("St. Louis"); If you do need to access a String object method on a string literal, you can. What happens is the JavaScript engine creates a String object, wraps it around the string literal, performs the method call, and then discards the String object. When to use String, as compared to using a string literal, depends on the circumstan- ces. Unless you plan on using the String object properties, you’ll want to use string literals wherever possible. However, if you’ll be using String methods, then create the string as an object. See Also Mozilla has a terrific page that discusses the concept of JavaScript literals and the dif- ferent types. You can access the page at Script_1.5_Guide/Literals. 2 Chapter 1: Working with JavaScript Strings Download from Wow eBook 1.1 Concatenating Two or More Strings Problem You want to merge two or more strings into one. Solution Concatenate the strings using the addition (+) operator: var string1 = "This is a "; var string2 = "test"; var string3 = string1 + string2; // creates a new string with "This is a test" Discussion The addition operator (+) is typically used to add numbers together: var newValue = 1 + 3; // result is 4 In JavaScript, though, the addition operator is overloaded, which means it can be used for multiple data types, including strings. When used with strings, the results are con- catenated, with the strings later in the equation appended to the end of the string result. You can add two strings: var string3 = string1 + string2; or you can add multiple strings: var string1 = "This"; var string2 = "is"; var string3 = "a"; var string4 = "test"; var stringResult = string1 + " " + string2 + " " + string3 + " " + string4; // result is "This is a test" There is a shortcut to concatenating strings, and that’s the JavaScript shorthand as- signment operator (+=). The following code snippet, which uses this operator: var oldValue = "apples"; oldValue += " and oranges"; // string now has "apples and oranges" is equivalent to: var oldValue = "apples"; oldValue = oldValue + " and oranges"; The shorthand assignment operator works with strings by concatenating the string on the right side of the operator to the end of the string on the left. 1.1 Concatenating Two or More Strings 3 Download from Wow eBook There is a built-in String method that can concatenate multiple strings: concat. It takes one or more string parameters, each of which are appended to the end of the string object: var nwStrng = "".concat("This ","is ","a ","string"); // returns "This is a string" The concat method can be a simpler way to generate a string from multiple values, such as generating a string from several form fields. However, the use of the addition operator is the more commonly used approach. 1.2 Concatenating a String and Another Data Type Problem You want to concatenate a string with another data type, such as a number. Solution Use the exact same operators, such as addition (+) and shorthand assignment (+=), you use when concatenating strings: var numValue = 23.45; var total = "And the total is " + numValue; // string has "And the total is 23.45" Discussion A different process occurs when adding a string and another data type. In the case of another data type, such as a Boolean or number, the JavaScript engine first converts the other data type’s value into a string, and then performs concatenation: // add a boolean to a string var boolValue = true; var strngValue = "The value is " + boolValue; // results in "The value is true" // add a number to a string var numValue = 3.0; strngValue = "The value is " + numValue; // results in "The value is 3" The automatic data conversion also applies if you’re concatenating a String object with a string literal, which is a necessary capability if you’re not sure whether the strings you’re working with are objects or literals but you still want to create a concatenated string: var strObject = new String("The value is "); var strngLiteral = "a string"; var strngValue = strObject + strngLiteral; // results in "The value is a string" The resulting string is a string literal, not a String object. 4 Chapter 1: Working with JavaScript Strings Download from Wow eBook 1.3 Conditionally Comparing Strings Problem You want to compare two strings to see if they’re the same. Solution Use the equality operator (==) within a conditional test: var strName = prompt("What's your name?", ""); if (strName == "Shelley") alert("Your name is Shelley Good for you"); else alert("Your name isn't Shelley. Bummer."); Discussion Two strings can be compared using the equality operator (==). When used within a conditional statement, a block of code is run if the test evaluates to true (the strings are equal): if (strName == "Shelley") alert("Your name is Shelley Good for you"); If the strings are not equal, the first statement following the conditional statement block is processed. If an if...else conditional statement is used, the block of code following the else keyword is the one that’s processed: if (strName == "Shelley") alert("Your name is Shelley Good for you"); else alert("Your name isn't Shelley. Bummer."); There are factors that can influence the success of the string comparison. For instance, strings have case, and can consist of uppercase characters, lowercase characters, or a combination of both. Unless case is an issue, you’ll most likely want to convert the string to all lowercase or uppercase, using the built-in String methods toLowerCase and toUpperCase, before making the comparison, as shown in the following code: var strName = prompt("What's your name?", ""); if (strName.toUpperCase () == "SHELLEY") alert("Your name is Shelley Good for you"); else alert("Your name isn't Shelley. Bummer."); Note that the toUpperCase method (and toLowerCase) do not take any parameters. 1.3 Conditionally Comparing Strings 5 Download from Wow eBook In Recipe 1.2, I discussed that data type conversion occurs automatically when con- catenating a numeric or Boolean value, or a String object to a string. This same type of data type conversion also occurs with the equality operator if one value is a string. In the following, the number 10.00 is converted into the string “10”, and then used in the comparison: var numVal = 10.00; if (numVal == "10") alert ("The value is ten"); succeeds There may be times, though, when you don’t want automatic data conversion to occur—when you want the comparison to fail if the values are of different data types. For instance, if one value is a string literal and the other is a String object, you might want the comparison to fail because the two variables are of different data types, re- gardless of their perspective values. In this case, you’ll want to use a different equality operator, the strict equality operator (===): var strObject = new String("Shelley"); var strLiteral = "Shelley"; if (strObject == strLiteral) // this comparison succeeds ... if (strObject === strLiteral) // fails because of different data types The comparison fails if the two variables being compared are different data types, even though their primitive string values are the same. Sometimes, you might want to specifically test that two strings are not alike, rather than whether they are alike. The operators to use then are the inequality operator (=) and strict inequality operator (==). They work in the same manner as the previous two operators just discussed, but return true when the strings are not alike: var strnOne = "one"; var strnTwo = "two"; if (strnOne = strnTwo) // true, as they are not the same string value The strict inequality operator returns true if the strings are not the same value or the data type of the two operands (values on either side of the operator) is different: var strObject = new String("Shelley"); var strLiteral = "Shelley"; if (strObject == strLiteral) // succeeds, because data type of operands differs If you’re more interested in discovering how two strings may differ, you can use other comparison operators, as shown in Table 1-1. 6 Chapter 1: Working with JavaScript Strings Download from Wow eBook Table 1-1. Comparison operators Operator Description Example var sVal = "this"; Equality == True if operands are the same; otherwise false if (sVal == "this) // true var sVal = "this"; Strict equality === True if operands are the same, and the same data type; var sVal2 = new String("this"); otherwise false if (sVal === sVal2) // not true var sVal = "this"; Inequality = True if operands are not the same; otherwise false if (sVal == "that") // true var sVal = "this"; Strict inequality == True if operands are not the same, or are not the same var sVal2 = new String("this"); data type; otherwise false if (sVal == sVal2) // true var sOne = "cat"; Greater than True if first operand is greater in value than second var sTwo = "dog"; operand if (sOne sTwo) // false var sOne = "Cat"; Greater than or equal = True if first operand is greater than or equal to second var sTwo = "cat"; operand if (sOne = sTwo) // true var sOne = "cat"; Less than True if second operand is greater than first operand var sTwo = "Cat"; if (sOne sTwo) // true var sOne = new String("cat"); Less than or equal = True if second operand is greater than or equal to first var sTwo = "cat"; operand if (sOne = sTwo) // equal, true Comparison operators work numerically with numbers, but lexically with strings. For instance, the value “dog” would be lexically greater than “cat”, because the letter “d” in “dog” occurs later in the alphabet than the letter “c” in “cat”: var sOne = "cat"; var sTwo = "dog" if (sOne sTwo // false, because "cat" is lexically less than "dog" If two string literals only vary based on case, the uppercase characters are lexically greater than the lowercase letter: var sOne = "Cat"; var sTwo = "cat"; if (sOne = sTwo) // true, because 'C' is lexically greater than 'c' There is no strict greater than or strict less than operators, so it makes no difference if the data type of the operands differs: var sOne = new String("cat"); var sTwo = "cat"; if (sOne = sTwo) // both equal, so true, as data type doesn't matter 1.3 Conditionally Comparing Strings 7 Download from Wow eBook Before leaving this recipe, there is another approach you can use to compare strings, but this one has a little kick to it. It’s based on the String method, localeCompare. The localeCompare method takes one parameter, a string, which is compared against the string value to which it is attached. The method returns a numeric value equal to 0 if the two strings are the same; –1 if the string parameter is lexically greater than the original string; 1 otherwise: var fruit1 = "apple"; var fruit2 = "grape"; var i = fruit1.localeCompare(fruit2); // returns -1 For the most part, you’ll probably use the comparison operators rather than the localeCompare method, but it’s always interesting to see more than one approach. See Also For more on string-to-number conversion, see Recipe 4.5. 1.4 Finding a Substring in a String Problem You want to find out if a substring, a particular series of characters, exists in a string. Solution Use the String object’s built-in indexOf method to find the position of the substring, if it exists: var testValue = "This is the Cookbook's test string"; var subsValue = "Cookbook"; var iValue = testValue.indexOf(subsValue); // returns value of 12, index of substring if (iValue = -1) // succeeds, because substring exists Discussion The String indexOf method returns a number representing the index, or position of the first character of the substring, with 0 being the index position of the first character in the string. To test if the substring doesn’t exist, you can compare the returned value to –1, which is the value returned if the substring isn’t found: if (iValue = -1) // true if substring found The indexOf method takes two parameters: the substring, and an optional second pa- rameter, an index value of where to begin a search: 8 Chapter 1: Working with JavaScript Strings Download from Wow eBook var tstString = "This apple is my apple"; var iValue = tstString.indexOf("apple", 10); // returns 17, index of second substring The indexOf method works from left to right, but sometimes you might want to find the index of a substring by searching within the string from right to left. There’s another String method, lastIndexOf, which returns the index position of the last occurrence of a substring within a string: var txtString = "This apple is my apple"; var iValue = tstString.lastIndexOf("apple"); // returns 17, // index of last occurrence of substring Like indexOf, lastIndexOf also takes an optional second parameter, which is an index value of where to start the search, counted from the right: "This apple is my apple".lastIndexOf("apple"); // returns value of 17 "This apple is my apple".lastIndexOf("apple",12); // returns value of 5 "This apple is my apple".lastIndexOf("apple", 3); // returns value of -1, not found Notice that the value returned from lastIndexOf changes based on the starting position, as counted from the string’s right. It’s odd to see a String method called directly on quoted text, but in JavaScript, there’s no difference in calling the method on a string literal, directly, or on a string variable. See Also The String method search is used with regular expressions in order to find a specific pattern within a string, and is discussed in Recipe 2.3. The String method replace can be used to replace a substring found using a regular expression, and is discussed in Recipe 2.4. 1.5 Extracting a Substring from a String Problem You have a string with several sentences, one of which has a list of items. The list begins with a colon (:) and ends with a period (.). You want to extract just the list. Solution Use the indexOf String method to locate the colon, and then use it again to find the first period following the colon. With these two locations, extract the string using the String substring method: var sentence = "This is one sentence. This is a sentence with a list of items: cherries, oranges, apples, bananas."; 1.5 Extracting a Substring from a String 9 Download from Wow eBook var start = sentence.indexOf(":"); var end = sentence.indexOf(".", start+1); var list = sentence.substring(start+1, end); Discussion The list is delimited by a beginning colon character and an ending period. The indexOf method is used without the second parameter in the first search, to find the colon. The method is used again, but the colon’s position (plus 1) is used to modify the beginning location of the search for the period: var end = sentence.indexOf(".",start+1); If we didn’t modify the search for the ending period, we would have ended up with the location of the first sentence’s period, rather than the location of the second sentence’s period. Once we have the beginning and ending location for the list, we use the substring method, passing in the two index values representing the beginning and ending posi- tions of the string: var list = sentence.substring(start+1, end); The resulting string in list is: cherries, oranges, apples, bananas We could then use a method, such as String.split to split the list into its individual values: var fruits = list.split(",") ; // array of values There is another string extraction method, substr, but it’s based on the index position of the start of the substring, and then passing in the length of the substring as the second parameter. In a real life application, we won’t know the length of the sentence. See Also See Recipe 1.7 for more on using the String.split method. 1.6 Checking for an Existing, Nonempty String Problem You want to check that a variable is defined, is a string, and is not empty. 10 Chapter 1: Working with JavaScript Strings Download from Wow eBook Solution Use a combination of the typeof operator, the general valueOf method (which all Java- Script objects share), and the String length property to create a conditional test that ensures a variable is set, is a string, and is not empty: // true if variable exists, is a string, and has a length greater than zero if(((typeof unknownVariable = "undefined") && (typeof unknownVariable.valueOf() == "string")) && (unknownVariable.length 0)) ... Discussion Probably the most important built-in property for String is length. You can use length to find out how long the string is, and to test whether the string variable is an empty string (zero length) or not: if (strFromFormElement.length == 0) // testing for empty string However, when you’re working with strings and aren’t sure whether they’re set, you can’t just check their length, as you’ll get an undefined JavaScript error if the variable has never been set. You have to combine the length test with another test for existence, and this brings us to the typeof operator. The JavaScript typeof operator returns the type of a variable. The list of possible re- turned values are: • "number" if variable is a number • "string" if variable is a string • "boolean" if variable is a Boolean • "function" if variable is a function • "object" if variable is null, an array, or another JavaScript object • "undefined" if variable is undefined The last value is what interests us right now, because a variable that has never been defined has a data type of undefined. When a data type test is combined with a test of string length via a logical AND (&&) operator, the only time the entire statement will succeed is if the variable has been defined, and it contains a string with a length longer than zero: // succeeds if variable exists, and has length greater than zero if ((typeof unknownVariable == "undefined") && (unknownVariable.length )) ... 1.6 Checking for an Existing, Nonempty String 11 Download from Wow eBook If the first test fails—whether the variable has been defined—the second condition isn’t processed, as the entire statement fails. This prevents the error of accessing a property on an undefined variable. The conditional statement in the last code snippet works, but what happens if the variable is defined, but is not a string? For instance, if the variable is a number? Well, in this case, the condition still fails, because the length property is undefined for a number. However, what if the value is a String object? If you’re not sure what type the variable is, you can also explicitly test for the "string" data type before testing the length: // succeeds if string with length greater than zero if ((typeof unknownVariable == "string") && (unknownVariable.length 0)) ... If the test succeeds, you know exactly what you have: a string, with a length greater than zero. However, if the variable is a String object, not a literal, typeof returns a data type of "object" not "string". That’s why the solution incorporates another JavaScript object method, valueOf. The valueOf method is available for all JavaScript objects, and returns the primitive value of whatever the object is: for Number, String, and boolean, their primitive values; for Function, the function text, and so on. So if the variable is a String object, valueOf returns a string literal. If the variable is already a string literal, applying the valueOf method to it temporarily wraps it in a String object, which means the valueOf method will still return a string literal. Our conditional test then ends up incorporating a test to see if the variable has been set, and if so, whether it is a String object or literal using valueOf, and, finally, whether the length of the string is greater than zero: // true if variable exists, is a string, and has a length greater than zero if(((typeof unknownVariable = "undefined") && (typeof unknownVariable.valueOf() == "string")) && (unknownVariable.length 0)) ... Seems like a lot of work, but typically your application won’t have to be this extensive when testing a value. Generally you’ll only need to test whether a variable has been set, or find the length of a string, in order to ensure it’s not an empty string. 12 Chapter 1: Working with JavaScript Strings Download from Wow eBook 1.7 Breaking a Keyword String into Separate Keywords Problem You have a string with keywords, separated by commas. You want to break the string into an array of separate keywords, and then print the keywords out with a keyword label. Solution Use the String split method to split the string on the commas. Loop through the array, printing out the separate values. Example 1-1 shows a complete web page demonstrat- ing this approach. The keywords are provided by the web page reader, via a prompt window, and are then processed and printed out to the web page. Example 1-1. Demonstrating use of String split to get keyword list DOCTYPE html head titleExample 1-1/title meta http-equiv="Content-Type" content="text/html;charset=utf-8" script type="text/javascript" window.onload = function() // get keyword list var keywordList = prompt("Enter keywords, separated by commas",""); // use split to create array of keywords var arrayList = keywordList.split(","); // build result HTML var resultString = ""; for (var i = 0; i arrayList.length; i++) resultString+="keyword: " + arrayListi + "br /"; // print out to page var blk = document.getElementById("result"); blk.innerHTML = resultString; /script /head body div id="result" /div /body /html 1.7 Breaking a Keyword String into Separate Keywords 13 Download from Wow eBook Discussion The String split method takes two parameters: a required parameter with the char- acter representing the separator for the split method; the second parameter (optional) is a number representing a count of the number of splits to make. In Example 1-1, the separator is a comma (,), and no second parameter is provided. An example of using the second parameter is the following: var strList = "keyword1,keyword2,keyword3,keyword4"; The following split method call would generate an array with two entries: var arrayList = strList.split(",",2); // results in two element array Not specifying the second parameter will split on every occurrence of the separator found: var arrayList = strList.split(","); // results in four element array Here’s an interesting use of split: if you want to split a string on every character, specify the empty string ('') or ("") as the separator: var arrayList = strList.split(""); You can also use a regular expression as the parameter to split, though this can be a little tricky. For instance, to find the same sentence list as returned from the example code in the solution, you could use a couple of regular expressions: var sentence = "This is one sentence. This is a sentence with a list of items: cherries, oranges, apples, bananas."; var val = sentence.split(/:/); alert(val1.split(/\./)0); The regular expression looks for a colon first, which is then used for the first split. The second split uses a regular expression on the resulting value from the first split, to look for the period. The list is then in the first array element of this result. Tricky, and a little hard to get your head around, but using regular expressions with split could be a handy option when nothing else works. See Also See Recipe 5.3 for a discussion about creating a string from an array. See Recipe 11.1 about accessing a page element with the document object, and Recipe 12.1 about using the innerHTML property. Chapter 2 provides coverage of regular expressions. Rec- ipe 2.6 covers using capturing parentheses and a regular expression to get the same results as the solutions demonstrated in this recipe. 14 Chapter 1: Working with JavaScript Strings Download from Wow eBook 1.8 Inserting Special Characters Problem You want to insert a special character, such as a line feed, into a string. Solution Use one of the escape sequences in the string. For instance, to add the copyright symbol into a block of text to be added to the page (shown in Figure 1-1), use the escape sequence \u00A9: var resultString = "pThis page \u00A9 Shelley Powers /p"; // print out to page var blk = document.getElementById("result"); blk.innerHTML = resultString; Figure 1-1. Page demonstrating use of escape sequence to create copyright symbol Discussion The escape sequences in JavaScript all begin with the backslash character, (\). This character lets the application processing the string know that what follows is a sequence of characters that need special handling. Table 1-2 lists the other escape sequences. 1.8 Inserting Special Characters 15 Download from Wow eBook Table 1-2. Escape sequences Sequence Character \' Single quote \" Double quote \\ Backslash \b Backspace \f Form feed \n Newline \r Carriage return \t Horizontal tab \ddd Octal sequence (3 digits: ddd) \xdd Hexadecimal sequence (2 digits: dd) \udddd Unicode sequence (4 hex digits: dddd) The last three escape sequences in Table 1-2 are patterns, where providing different numeric values will result in differing escape sequences. The copyright symbol in the solution is an example of the Unicode sequence. All of the escape sequences listed in Table 1-2 can also be represented as a Unicode sequence. For instance, the horizontal tab (\t), can also be represented as the Unicode escape sequence, \u0009. Of course, if the user agent disregards the special character, as browsers do with the horizontal tab, the use is moot. One of the most common uses of escape sequences is to include double or single quotes within strings delimited by the same character: var newString = 'You can\'t use single quotes in a string surrounded by single quotes'; 1.9 Processing Individual Lines of a textarea Problem You want to be able to process individual lines from a textarea box. Solution Use the String split method, combined with the line break escape sequence (\n) to split the contents of the textarea into its separate lines: var txtBox = document.getElementById("inputbox"); var lines = txtBox.value.split("\n"); // print out last line to page 16 Chapter 1: Working with JavaScript Strings Download from Wow eBook var blk = document.getElementById("result"); blk.innerHTML = lineslines.length-1; Discussion Escape sequences can be used for more than building strings; they can also be used in pattern-matching operations. In the solution, the textarea string is split into its separate lines by looking for the escape sequence for the newline character (\n). This approach is also a way to convert text that may be encoded with escape sequences, such as the newline character, into properly formatted HTML. For instance, to modify the example to output the textarea exactly as typed, but as HTML, use the following: // get textarea string and split on new lines var txtBo x = document.getElementById("test"); var lines = txtBox.value.split("\n"); // generate HTML version of text var resultString = "p"; for (var i = 0; i lines.length; i++) resultString += linesi + "br /"; resultString += "/p"; // print out to page var blk = document.getElementById("result"); blk.innerHTML = resultString; This code snippet converts all line breaks into the HTML br element. When added back to the page, the text is printed as it was found in the textarea, line breaks and all. This is a popular technique used to echo comments, as they are typed for a live preview, in many blogs. See Also Another approach to replacing characters in a string is to use a regular expression with the String replace method, covered in Recipe 2.5. 1.10 Trimming Whitespace from the Ends of a String Problem You want to trim the whitespace around a string that you’ve accessed from a form element. Solution Use the new ECMAScript 5 String trim method: var txtBox = document.getElementById("test"); var lines = txtBox.value.split("\n"); 1.10 Trimming Whitespace from the Ends of a String 17 Download from Wow eBook var resultString = ""; for (var i = 0; i lines.length; i++) var strng = linesi.trim(); resultString += strng + "-"; alert(resultString); Discussion Prior to the release of ECMAScript 5, you had to use regular expressions and the String replace method to trim the unwanted whitespace from around a string. Now, trimming a string is as simple as calling the trim method. Firefox already supported a trim method, but its use was nonstandard before ECMAScript 5. Most, if not all, browsers will eventually support trim. Among the target browsers for this book, the only one that doesn’t is IE8. A workaround you can use is outlined below, which not only allows for the use of trim, but a fallback if trim does not exist. First, at some point before you need to use the trim functionality, you must test to see if trim exists as a property of the String object. If it doesn’t, you’ll need to use the String prototype to add a customized trim method to the object: if (typeof String.trim == "undefined") String.prototype.trim = function() return this.replace(/(\s)(\s)/g, ""); Once this code is processed, when you call the trim method on any string, it will return a string with whitespace trimmed from both ends (as long as the application is within page scope). This functionality happens regardless of whether the method is already built-in by the browser, or added by your hack: var strng = lines1.trim(); Most of the JavaScript framework libraries, such as jQuery, which I in- troduce in Chapter 17, have already added the trim method. Other new, related methods from ECMAScript 5 are trimLeft, which trims the white- space on the left side of the string, and trimRight, which does the same on the right side of the string. 18 Chapter 1: Working with JavaScript Strings Download from Wow eBook See Also The use of regular expressions is covered in Chapter 2. The use of the JavaScript object prototype property is covered in Recipe 16.3. 1.11 Left- or Right-Pad a String Problem You need to create a string that’s left- or right-padded with a given character. Solution Test the length of the string, then generate a padding string consisting of duplications of a given character to either concatenate to the original string (if padding to the right) or attaching to the beginning of the string (if padding to the left). The following left- pads the existing string with the nonbreaking space named character ( ): DOCTYPE html head titleRecipe 1.12/title /head body div id="result"/div script var prefLineLength = 20; var oldStr = "This is a string"; var diff = prefLineLength - oldStr.length; var filler = ' '; for (var i = 0; i diff; i++) oldStr=filler + oldStr; document.getElementById("result").innerHTML=oldStr; /script /body Discussion You don’t want to pad strings that go into a database, because you want to keep the data in the database as small and efficient as possible. But you might want to pad the value before you display it in the web page. The characters you use to pad the string are guided by the use. Typically, you’ll use spaces. However, if the value is inserted into a web page that disregards multiple spaces, 1.11 Left- or Right-Pad a String 19 Download from Wow eBook you’ll either have to use the named entity ( ) or its numeric equivalent(&160;) if your content needs to be XHTML-compatible. Or you can just use CSS to format the text positioning. For instance, to right-align the text, create the CSS rule: .rightformatted text-align: right: And then apply the rule when you add the string to the page. You can use the CSS rule as a class name with the innerHTML property: var div = document.getElementById("item"); item.innerHTML="p" + strValue + "/p"; or you can use DOM (Document Object Model) Level 2 functionality: var num = 123.55; var item = document.getElementById("item"); // create text node and paragraph element var txt = document.createTextNode(num); var p = document.createElement("p"); // attach text node to paragraph p.appendChild(txt); p.setAttribute("class","rightformatted"); // append paragraph to document element item.appendChild(p); See Also See Chapters 11 and 12 for more on using the Document Object Model (DOM) to access, create, and remove web page elements and element attributes. 20 Chapter 1: Working with JavaScript Strings Download from Wow eBook