JavaScript Selections: TextRange Objects

TextRange Objects

Adobe's Flash 10.1 Goes Mobile (Minus iPhone)

A TextRange object represents text in an HTML element. The easiest way to understand this object, which is only available on Win32 platforms (Internet Explorer 4.0x), is to work with an example. Take a look at the following HTML code:

<HTML>
<HEAD>
<TITLE>Sample Page</TITLE>
</HEAD>
<BODY>
<H1>This is a sample page.</H1>
<P>This is some sample text.</P>
</BODY>
</HTML>

An HTML document's text is known as the stream. The stream is basically the entire code, with all tag definitions stripped off. In other words, HTML elements do not affect the stream. For instance, the stream in the previous example is:

This is a sample page. This is some sample text.

The TextRange object reflects the stream for a given portion of the document. With this object you can manipulate the stream to modify the text that appears on the page. You can use this object to retrieve and modify text in an element, to locate specific strings in the text, and to carry out commands that affect the appearance of the text. A TextRange object is usually defined with the desired element's TextRange() method, as demonstrated in the following statement:

var range = document.body.createTextRange();

This method can only be applied to a BODY, BUTTON, TEXTAREA, or an INPUT element having text type (TYPE="text").

Another way to create a TextRange object is to use the document.selection object's createRange() method in the following fashion:

var range = document.selection.createRange();

After selecting a text range, you can use several methods to manipulate the resulting TextRange object. We'll discuss these methods in the next section of this column.