String Object

String Objects have one Property, length, and many Methods. The length Property gives the length of the String. The methods fall into three categories:

• Methods that manipulate the contents of the String
• Methods that manipulate the appearance of the String
• Methods that convert the String into an HTML element

String Content Methods

The following methods can be used on String Objects to access, control, or modify their content:

var myStr = "Let's see what happens!";

Displaying Subsets of Strings

Property
myStr.length == 23 (the only property associated with the String Object)

The methods charAt and substring are used to extract either a single character from a string, at position index, or to extract a range of characters, from position from-index up to but not including position to-index. Character positions are zero-based, as are all JavaScript arrays, so that all indices must fall between 0 and one less than the length of the array. For example, using myStr, we have

Methods
myStr.charAt(6) == "s"
myStr.substring(6, 8) == "se"

These methods both return strings.

Finally, both the indexOf and lastIndexOf methods are used to search for char with a string. indexOf searches from the beginning (left side) of the string and lastIndexOf searches from the end (right side). Both return an integer index if they find the character, and -1 if they do not. Using myStr again, we can search for the character o from both sides:

Methods
myStr.indexOf("a") == 12
myStr.lastIndexOf("a") == 16

The first search finds the first a of the word "what" at position 12, and the second search finds the second a of the "happens" since that is the first a when searching from right to left. Both of these methods also take an optional second argument that specifies an initial index at which to start the search.

Output for the above examples

The code that produced the above anchor & appearance of the String:

var strAppear = "String Appearance Methods";
var tarAppear = "Appear";

document.write(strAppear.bold().anchor(tarAppear));

The above example will be discussed in Methods that convert the String into an HTML element.

The string appearance methods are used to control how a string appears when displayed on a Web page. If you are creating a page with standard HTML tags you would achieve the same effects by using various tags. For example, to make the string "help" appear in italics you would write <I>help</I>. The string appearance methods allow you to obtain the same effects in JavaScript without using the corresponding HTML elements. The string appearance methods are as follows:

String Object Methods for HTML Formatting

The toLowerCase and toUpperCase methods convert the contents of the string entirely to lower - and uppercase, respectively. In addition, we can apply the two case conversion methods and get

var myStr = "Let's see what happens!"

Methods
myStr.toLowerCase() == "let's see what happens!"
myStr.toUpperCase() == "LET'S SEE WHAT HAPPENS!"

These two functions do nothing to characters that have no case, so the two spaces in this string are unchanged. We could have also applied the methods directly to the literal form of this string object, so "Look At This".toLowerCase() is also equal to "look at this".

Most of these methods should be self-explanatory. The italics method, for example, performs exactly the same function as the <I> tag in HTML. The only two that take arguments are the fontcolor and fontsize methods. The fontcolor method changes the font color of the string, as if the <FONT COLOR="color"> attribute had been size. Similarly, the fontsize method changes the size of the font used for displaying a string as if the <FONT SIZE="size"> attribute had been given. color should be a string; size may be a number or a string. If it's a number then this specifies an absolute font size; if it's a string such as "+2" it specifies an increment relative to the current font size. The listing below shows several examples using the string appearance methods.

String Methods Can Be Used to Change How Strings Are Displayed

var bStr = "big";
var sStr = "small";

/* This displays strings with both big and small text. */

document.write("<BR>This is " + bStr.big() + " text");
document.write("<BR>This is " + sStr.small() + "text");

/*
The following two strings contain directly embedded HTML tags. They have exactly the same result as the two method calls above
*/

document.write("<BR>This is <BIG>big</BIG> text");
document.write("<BR>This is <SMALL>small</SMALL> text"); /* If your favorite tag does not have a method, just embed it */
document.write("<BR>This is <STRONG>strong</STRONG> text");
document.write("<BR>");

Output for the above code

HTML String Methods

JavaScript provides two string methods for converting strings into hypertext entities. These methods should be clearly distinguished from the HTML objects, such as forms, which are discussed in the section "Browser and HTML Objects". These methods are used to create HTML, while the HTML objects already are HTML. The two methods in this category are as follows:

HTML String Methods

• aString.anchor(NAMEstr) - the value of the NAME attribute of the HTML <A> tag -- the name of the anchor to be created. It returns a copy of string, enclosed within
  <A NAME="NAMEstr"> aString </A> HTML tags.
• aString.link(HREFstr) - add a hypertext link to a string. The URL target of the hypertext link is to be added to the string. This string argument specifies the value of the HREF attribute of the <A> HTML tag. It returns a copy of string, enclosed within
  <A HREF="HREFstr"> aString </A> HTML tags.

The listing below uses these methods and shows a simple example that sets up an anchor target and then links to it.

String Methods Can Be Used to Create HTML Anchors and Links

var strAppear = "String Appearance Methods";
var tarAppear = "Appear";

document.write(strAppear.anchor(tarAppear)); produces the output below:

<A NAME="Appear">String Appearance Methods</A>

document.write("Click here to view " + strAppear.link(#" +  tarAppear)); produces the output below:

Click here to view  <A HREF="#Appear">String Appearance Methods</A>

Example in Action