JavaScript: The Complete Reference, Second Edition - page 51

The indexOf() method takes a string argument and returns the index of the first occurrence of the argument in the string. For example,

"JavaScript".indexOf("Script");

returns 4 . If the argument is not found, “1 is returned. This method also accepts an optional second argument that specifies the index at which to start the search. When specified, the method returns the index of the first occurrence of the argument at or after the start index. For example,

"JavaScript".indexOf("a", 2);

returns 3 . A related method is lastIndexOf() , which returns the index of the last occurrence of the string given as an argument. It also accepts an optional second argument that indicates the index at which to end the search. For example,

"JavaScript".lastIndexOf("a", 2);

returns 1 . This method also returns “1 if the string is not found.

There are numerous ways to extract substrings in JavaScript. The best way to do so is with substring() . The first argument to substring() specifies the index at which the desired substring begins. The optional second argument indicates the index at which the desired substring ends. The method returns a string containing the substring beginning at the given index up to but not including the character at the index specified by the second argument. For example,

"JavaScript".substring(3);

returns aScript, and

"JavaScript".substring(3, 7);

returns aScr. The slice() method is a slightly more powerful version of substring() . It accepts the same arguments as substring() but the indices are allowed to be negative. A negative index is treated as an offset from the end of the string.

The match() and search() methods use regular expressions to perform more complicated examination of strings. The use of regular expressions is discussed in the next chapter.

Manipulating Strings

The most basic operation one can perform with strings is concatenation. Concatenating strings with the + operator should be familiar by now. The String object also provides a concat() method to achieve the same result. It accepts any number of arguments and returns the string obtained by concatenating the arguments to the string on which it was invoked. For example,

var s = "JavaScript".concat(" is", " a", " flexible", " language.");

assigns JavaScript is a flexible language. to the variable s , just as the following would:

var s = "JavaScript" + " is" + " a" + " flexible" + " language";

A method that comes in very useful when parsing preformatted strings is split() . The split() method breaks the string up into separate strings according to a delimiter passed as its first argument. The result is returned in an array. For example,

var wordArray = "A simple example".split(" ");

assigns wordArray an array with three elements, A, simple, and example. Passing the empty string as the delimiter breaks the string up into an array of strings containing individual characters. The method also accepts a second argument that specifies the maximum number of elements into which the string can be broken.

Marking Up Strings as Traditional HTML

Because JavaScript is commonly used to manipulate Web pages, the String object provides a large set of methods that mark strings up as HTML. Each of these methods returns the string surrounded by a pair of HTML tags. Note that the HTML returned is not standards-oriented HTML 4 or XHTML but more like the old physical style HTML 3.2. For example, the bold() method places << B >> and << /B >> tags around the string it is invoked on; the following

var s = "This is very important".bold();

places this string in s :

<<

B

>>This is very important<<

/B

>>

You may wonder how to apply more than one HTML-related method to a string. This is easily accomplished by chaining method invocations. While chained method invocations can appear intimidating, they come in handy when creating HTML markup from strings. For example,

var s = "This is important".bold().strike().blink();

assigns the following string to s :

<<BLINK>><<STRIKE>><<B>>This is important<</B>><</STRIKE>><</BLINK>>

This displays a blinking, struck-through, bold string when placed in a Web document. Ignoring the fact that such strings are incredibly annoying, the example illustrates how method invocations can be chained together for efficiency. It is easier to write the invocations in series than to invoke each on s , one at a time. Note how the methods were invoked inner-first, or, equivalently, left to right.

The various HTML String methods correspond to common HTML 3.2 and browser-specific tags like << BLINK >>. A complete list of the HTML-related String methods can be found in Table 7-6.

var x = "Marked point".anchor("marker");


// <A NAME="marker">Marked point</A>

var x = "Grow".big();


// <BIG>Grow</BIG>

var x = "Bad Netscape".blink();


// <BLINK>Bad Netscape</BLINK>

var x = "Behold!".bold();


// <B>Behold!</B>

var x = "Code".fixed();


// <TT>Code</TT>

var x = "green".font("green");


// <FONT COLOR="green">Green</FONT>


var x = "Red".font("#FF0000");


// <FONT COLOR="#FF0000">Red</FONT>

var x = "Change size".font(7);


// <FONT SIZE="7">Change size</FONT>


var x = "Change size".font("+1");


// <FONT SIZE="+1">Change size</FONT>

var x = "Special".italics();


// <I>Special</I>

var x = "click here".location("http://www.pint.com/");


// <A HERF="http://www.pint.com">


// click here</A>

var x = "Shrink".small();


// <SMALL>Shrink</SMALL>

var x = "Legal".strike();


// <STRIKE>Legal</STRIKE>

var x = "test".sub()


// <SUB>test</SUB>

var x = "test".sup()


// <SUP>test</SUP>