Most users would only want to use the innertext/innerhtml and Outertext/outerhtml properties and methods discussed previous Ly. However, there is some to advanced text manipulation that can being 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 is available on Non-microsoft Win32 platforms. For the latest information on Microsoft Internet Explorer cross-platform compatibility, from the article Q172976 in the Microso FT knowledge Base.
This article consists of the following topics:
Overview of the TextRange Object
What do I does 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) so you can use to carry out useful tasks related to D Ynamic content, such as searching for and selecting text. Text ranges let you selectively the pick out of characters, words, and sentences from a document. The TextRange object is, an abstract object, creates a start and end position on the stream of text that would appear In the HTML document. Consider the following simple HTML document:
<HTML>
<BODY>
<H1>Welcome</H1>
<CENTER><H2>Overview<H2></CENTER>
<p>be sure to <B>Refresh</B> this page.</p>
</BODY>
</HTML>
In this document, creating a-text range over the BODY element would position the start at the beginning of the textual con Tent of the body, and the ' End ' at the ' the ' textual content of the body. This text range would contain the plain text "Welcome Overview is sure to Refresh this page."
What do I does with a TextRange Object?
There are two parts to manipulating text with a TextRange object. The ' the ' to create a-text range so, the start and end positions encompass the desired text. The "Next" is to apply the "a" to "text", or make a copy of the text of the "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 ELSEWH ere in your document.
The TextRange object Model Reference for the properties and methods supported.
Positioning the TextRange Object
Each text range has a start and the position defining the scope of the text this is encompassed by the TextRange object . When you create a new text range, the "start and end positions encompass" 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 particular 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
<HTML><HEAD>
<title>movetopoint example</title>
<script>
function Selectme () {
var r=document.body.createtextrange ();
R.movetopoint (Window.event.x, WINDOW.EVENT.Y);
R.expand ("word");
R.select ();
}
</script>
</HEAD>
<BODY>
<H1 id=myh1 Onclick=selectme () >click on a word and it'll highlight
</BODY></HTML>
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 in this range as in the 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 particular 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 would not find the position where the User actually clicked. the following reworks the above example to handle this case.
Hide Example
<HTML><HEAD>
<title>movetopoint example</title>
<script for=document event=onclick>
var r
if (Window.event.srcElement.isTextEdit)
{
R=window.event.srcelement.createtextrange ();
}else{
var El=window.event.srcelement.parenttextedit;
R=el.createtextrange ();
}
R.movetopoint (Window.event.x, WINDOW.EVENT.Y);
R.expand ("word");
R.select ();
</script>
</HEAD>
<BODY>
<TEXTAREA>
There ' s text in this element too so you could click on
</TEXTAREA>
</BODY></HTML>
Show Me
Getting the Content of a TextRange
The content of a TextRange object can be viewed with the text or HTMLText property on the TextRange object. The Text property is a Read/write property of the similar to the innertext properties of the element objects, only this R Eplaces the text encompassed by a TextRange object.
the htmltext property is a read-only property that lets you Examine the html that is contained within the start and end points of the textrange object. to add rich html content to the text range, use the pastehtml method. although you can paste any html text that you want into a text range, the pastehtml method does not preserve the hierarchy of the document, as do the innerHTML and outerHTML Properties. although pastehtml won ' T fail if you paste invalid or inappropriate tags into the range, the resulting document might not look or beHave the way you expect. if you paste an html fragment, the fragment is automatically closed to prevent it from affecting subsequent text and elements. for example, this means that if your scripts rely on ordinal positions in the Document ' S all collection, after a pastehtml, the sourceindex into the document.all collection might point to a different element.
Comparing Ranges
Can create more than one-text range at a time with the using them for independent, simultaneous access to different portions O f the text in an element. You can also copy a-text range by using the duplicate method. This is useful if your want temporary access to a portion of the original range but don ' t want to bother re-creating or res Toring the original range. You can determine the relationship of a one text range to another by using methods such as IsEqual and InRange.
Because the object model never holds on to a text range, your ' ll need to re-create any range whenever control leaves and th En reenters your code. For example, any text range objects created by a event handler are discarded when the event handler.
You can determine whether one range is entirely contained within another text range by using the InRange method. You can determine whether two text ranges are by using the identical method. Text ranges are identical if they start and end at exactly the same positions. Note This identical text ranges are always considered to is within one another, meaning the InRange method returns True fo R these.
You can set the "Start or end" of a range to match the "start or end" of another range by using the setEndPoint me Thod. The method takes two parameters:a string describing which end points to transfer, and a range from which the source end P Oint is taken. The following example sets the end of the range R1 to the start of R2.
R1.setendpoint ("Starttoend", r2)
You can also with Starttostart, Endtostart, and Endtoend to set the end points.
You can compare the ' start or end points of two ranges by using the ' compareEndPoints method. This method compares the "End points" and returns-1, 0, or 1, indicating whether the end point of the ' a ' is less t Han, equal to, or greater than the second.
A bookmark is a easy way to save the current start and end positions of a-text range and quickly restore these positions When you need them. Create a bookmark for a given range by using the "GetBookmark method", which returns a opaque string that uniquely Tifies the bookmark. (Opaque means the string cannot be examined or modified.) Use the ' string with the ' MoveToBookmark ' to ' move the ' text range back to ' same start and end positions as when The bookmark was created.
Commands
You can use commands to apply formatting and to carry out special actions on the text of a text range. Execute a command by using the ExecCommand method. You are supply a command identifier and provide any additional command parameters. For example, your can change text to bold by using the Bold command as in the following Microsoft JScript (compatible with ECMA 262 Language Specification) Example:
var rng = Document.body.createTextRange ();
Rng.collapse ();
Rng.expand ("sentence");
Rng.execcommand ("Bold");
Show Me
The above example makes bold all-text up to the "the" the "the" the "the"
Not all commands are available in the all times. You can determine whether a command's available for a given text range by using the querycommandenabled and Querycommands Upported methods. For a list of commands, the Command Identifiers.
To determine whether a given command has already been applied to a-text range, use the Querycommandstate method to Retriev E The state of the command. The state is true if the command has been applied.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
