The TextRange object is an advanced feature of Dynamic HTML (DHTML) that can be used to implement many text-related tasks, such as searching and selecting text. The text range allows you to selectively select characters, words, and sentences from the document. The TextRange object is an abstract object that establishes the start and end positions on the text stream that the HTML document will display.
The following are common properties and methods for TextRange:
Property
Boundingheight gets the height of the rectangle that binds the TextRange object
Boundingleft gets the distance between the left edge of the rectangle of the bound TextRange object and the left side of the containing TextRange object
Offsetleft gets the left position of the calculation of the object relative to the layout or the parent coordinates specified by the Offsetparent property
Offsettop gets the calculated top position of the object relative to the layout or the parent coordinates specified by the Offsetparent property
HTMLText Gets the width of the rectangle that binds the TextRange object
Text to set or get the texts contained within a range
Method
MoveStart Change range Start position
MoveEnd the end position of the change range
Collapse move the insertion point to the beginning or end of the current range
Move collapses the given text range and moves the empty range to the given number of cells
ExecCommand executes commands on the current document, the current selection, or a given range
Select to place the current selection as the current object
FindText searches the text for text and sets the start and end points of the range to enclose the search string.
using the TextRange object typically includes three basic steps:
1. Create a text range
2. Set start and end points
3. Operate on scope
The code is as follows |
Copy Code |
<script language= "javascript" > function Movecursor () { var temp = this.txtnum.value; & nbsp if (isNaN (temp) { Alert (Please enter a number); return; } var rng = this.t Xttest.createtextrange (); Rng.move ("character", temp); Rng.select (); } </script> </HEAD> <BODY> <input type = "text" name= "Txttest" value= "Ming Rod through the" "the 21st of the" "", "the hero of the heroic, ambitious, the belly has a good plan, has the machine of the universe, and the world of the Volunteers." "Size=" ><br> Move cursor to <input type= "text" name= "Txtnum" size= "5" > Position <input Type= "button" Name= "Btnmove" value= "Move" onclick= "Movecursor ()" > </body> |
1.createTextRange ()
Create a TextRange object, the body, TEXT, TextArea, button and other elements support this method. The method returns a TextRange object.
2.move ("unit" [, Count])
The move () method performs two actions. First, the method overlaps the current document at the position of the previous ending point, which is used as an insertion point; Next, it moves the insertion point forward or backward to any character, word, or sentence unit.
The first parameter of the method is a string that specifies a character (character), Word (word), sentence (paragraph), TextEdit. The TextEdit value moves the insertion point to the end of the entire text range (no parameters are required). If you specify the first three units, the default value is 1 when you omit a parameter, or you can specify an integer value to indicate the number of cells, a positive sign to move forward, and a negative number to move backwards.
Note that the scope is still overlapping after the move () method is executed.
3.select ()
The Select () method selects text within the current text range, and the display cursor must also be used to implement it, because the so-called "cursor" can be understood as the range of boundary overlap
The code is as follows |
Copy Code |
<BODY> <textarea name= "Txtbox" rows= "7" cols= "id=" "Txtbox" > Chrysanthemum Station (with Golden Armor theme song) Singer: Jay Chou album: Still Fantasy Your tears are weak and bruised The pale Moon is curved and hangs past The night is too long to freeze into frost Who was in the attic, the icy desperation The rain softly drips the scarlet window I've been blown away by the wind on paper all my life. Dream in the distance into a wisp of chardonnay I'm blowing you up in the wind The Chrysanthemum is so dismal that your smile has yellowed The flower is broken, my mind is still dripping. The north wind night Young and your shadow is constantly cut Leave me alone on the lake to frost </textarea><br> <input type= "text" value= "Enter the content to query" id= "Txtfind" > <input type= "button" value= "Find Next" onclick= "FindText (txtfind.value)" > <script language= "JavaScript" > var rng = Txtbox.createtextrange (); function FindText (str) { if (str== "") Return Defines a variable as the offset of the MoveStart () function, that is, the start point skips the selection text var num = 0; if (document.selection) num = Document.selection.createRange (). Text.length; Each time the function is called, the end point is the end, and the start point is the new start point after the selection text is skipped Rng.movestart ("character", num); Rng.moveend ("character", txtBox.value.length); Select text After Search if (Rng.findtext (str)) Rng.select (); Search to the final range is still not found, prompt search complete, and restore RNG original range (otherwise you cannot perform a new search) if (RNG.TEXT!=STR) { Alert ("Search completed"); RNG = Txtbox.createtextrange (); } } </script> </BODY> |
The above example illustrates the use of the MoveStart () and Moveene () methods to select a range, and several methods appear as follows:
4.moveStart ("unit" [, Count]) and moveend ("unit" [, Count])
The MoveStart () and MoveEnd () methods are similar to the move () method, by default the start point is the first character of the container, and the end point is the last character
We can modify the above SelectText () function to prove that:
The code is as follows |
Copy Code |
function SelectText () { var rng = Txtbox.createtextrange (); Rng.movestart ("character", 1); Rng.moveend ("character",-1); Rng.select (); } |
The
moves the start point forward one character, and the end point moves one character backward, and after running, you can see that the range of selections is the entire text range except for the 1th and last 1 characters.
5.collapse ([Boolean])
can use the collapse () method to overlap a text range from the current dimension to a single insertion point between characters. An optional parameter to the collapse () method is a Boolean value that indicates whether the range is coincident at the beginning of the current range or at the end point. The default value is true and coincides at the beginning point:
6.findText ("searchstring" [, Searchscope,flags])
One of the most useful methods for TextRange objects is the FindText () method, whose default behavior is to browse the text range from the start point to the end point, searching for a case-insensitive string match. If an instance is found in a range, the start and end points of the range are placed in the text, the method returns True, or false, the start and end points are not moved. Method searches only for display text, and no tags or properties are searched. The
Optional parameter searchscope is an integer value that indicates the number of characters from the start point, the larger the value, the more text contained in the search scope, and a negative value forcing the search operation to search backwards from the current start point. The
Optional parameter flag is used to set whether the search is case-sensitive or if only the whole word is matched. A parameter is an integer value that calculates a single value with a bitwise combination of values that can hold one or more settings. The value of matching the whole word is 2; matching case is 4; If you want to match only one item, it's enough to provide only the desired value, but for both behaviors, use the bitwise Action XOR operator (^ operator) to make the value 6. The most common application of the
FindText () method includes a find and replace operation in the scope, and an instance of formatting a string, because the search usually starts with the current starting point of the range, so again the query wants to move the start point to the end of the matching text in the range (example 3). The move will allow FindText () to continue browsing the remaining text range to find another match. You can use the collapse (false) method to force the start point to move the end point of the first matching range. So the FindText () function of example 3 can also be modified to:
code is as follows |
copy code |
<script language= "JavaScript" > var rng = Txtbox.createtextrange (); Function FindText (str) { if (str== "") return; if (Rng.findtext (str)) { rng.select (); Rng.collapse (FALSE); } //Search to the final range or not found, prompt search complete, and restore RNG original range (otherwise unable to perform new search) Else { a Lert ("Search completed"); rng = Txtbox.createtextrange (); } } </script> |
6.parentElement ()
Parentelement () method returns a reference containing a text range container
Get the DOM object for the text selected by the cursor
The code is as follows |
Copy Code |
<script > Function Getparelem () { var rng = Document.selection.createRange (); var container = rng.parentelement (); //alert ( Container.getattribute ("id") | | Container.getattribute ("value") | | Container.getattribute ("type")); alert (container.tagname); } < /script> </HEAD> <BODY> This is text that belongs only to the body <div> This is the text contained in the DIV </div> <p> This is included in P inside the text </p> <div><strong> which is included in the div- Text in >strong </strong></div> <input type= button "value=" Select text and click "onclick=" Getparelem () " > </body> |