UsingtheTextRangeObject Most users will only want to use the innerText/innerHTML and outerText/outerHTML properties and methods discussed previusly. however, there is some more advanced text manipulation that can be done using a "text range" object. the TextRange object can be used to: Locate the text for a given element or a given point.
Search for words and characters in the text of the document.
Move through the text in logical units.
Provide read/write access to the plain text and the HTMLText in the document.
This feature might not be available on non-Microsoft Win32 platforms. For the latest information on Microsoft Internet Explorer cross-platform compatibility, see article Q172976 in the Microsoft Knowledge Base.
This article consists of the following topics:
Overview of the TextRange Object
What Do I Do with a TextRange Object?
Positioning the TextRange Object
Creating a TextRange Object
Getting the Content of a TextRange
Comparing Ranges
Commands
Overview of the TextRange Object
Text range objects are an advanced feature of Dynamic HTML (DHTML) that you can use to carry out useful tasks related to dynamic content, such as searching for and selecting text. text ranges let you selectively pick out characters, words, and sentences from a document. the TextRange object is an abstract object that creates a start and end position over the stream of text that wowould appear in the HTML document. consider the following simple HTML document:
Welcome
Overview
Be sureRefreshThis page.
In this document, creating a text range over the body element wocould position the start at the beginning of the textual content of the body, and the end at the end of the textual content of the body. this text range wocould contain the plain text "Welcome Overview Be Sure to Refresh this page."
What Do I Do with a TextRange Object?
There are two parts to manipulating text with a TextRange object. the first is to create a text range so that the start and end positions encompass the desired text. the next step is to apply a method to the text range, or make a copy of the text to be used elsewhere in the document. once the text range is positioned, you can search for text, select the text, and make a copy of the text and use it elsewhere in your document.
See the TextRange object in the Object Model Reference for the properties and methods supported.
Positioning the TextRange Object
Each text range has a start and an end position defining the scope of the text that is encompassed by the TextRange object. when you create a new text range, the start and end positions encompass the entire content by default. use methods such as move, moveStart, and moveEnd to change the scope of the text range.
Other methods can position the TextRange object with respect to a participant element, or a point on the page. for example, moveToElementText positions the text range so that it encompasses the text contained by the given element. the moveToPoint method positions the text range at a given point where the user clicked a mouse button. the x and y positions of the user's click are known by the window. event object and can be used to position the range over a given point. from this collapsed point, the range can then be expanded to encompass a word, sentence, or a whole textEdit (the entire possible TextRange object ).
Show Example
MoveToPoint Example
Script
Function selectMe (){
Var r = document. body. createTextRange ();
R. moveToPoint (window. event. x, window. event. y );
R. expand ("word ");
R. select ();
}
Script
Click on a word and it will highlight
Show Me
Creating a TextRange Object
You create a TextRange object by applying the createTextRange method to a body, textArea, or button element. you can also create a text range from a selection made by the user. the createRange method on the selection object returns a text range. you can use the same methods and properties on this range as you do for ranges created using createTextRange.
Creating a TextRange object on the body will not include the content inside a textArea or button. conversely, you cannot change the start or end position of a text range over the textArea or button to move outside the scope of these particle elements. use the properties provided on each element, isTextEdit and parentTextEdit, to walk the hierarchy. if the document above contained a textArea, a createTextRange on the body object wocould not find the position where the user actually clicked. the following reworks the above example to handle this case.
Hide Example
MoveToPoint Example
