The range of the consortium
Range is used to represent the user's selection area, which is defined by two boundary positions, and the position is composed of its container and offset, called container and offsets. The following is a simple location example:
Copy Code code as follows:
<p><span> text </span>^<span> text </span></p>
where ^ represents a position, then container is the parent node p,offset The offset is 1 relative to the parent node. Note that when container is an element node, its offset unit is a node, that is, the number of child nodes that are experienced from the first child node of the container to the current position.
Accordingly, container can also be a text node, when container is textnode, and offset is the number of utf-16 characters experienced from the Textnode to the current position (meaning, as in Chinese and English counts, not byte counts). Such as
Copy Code code as follows:
<p><span> text </span><span>01234^567</span></p>
In the example above, container is the text node of "01234567", and offset is the number of characters that are experienced from the first character of the text node to the current position, which is 5.
IE Range
For a brief introduction, please refer to MSDN
IE range does not have a clear concept of container and offset, but the basic idea is the same as that of the range, with the same expressive power, divided into TextRange and Controlrange, including a series of methods.
Rather than literal text, TextRange represents the content of the user's selection area (which can be htmltext to get the full content), mostly in text as a cell rather than as a DOM tree node.
Controlrange literally means get the selection control, actually some elements (Div,img,object ...). When you are in an editable state, click to select the entire element.
the acquisition of IE standardization
As you can see from the above, the range of the container is more normative, clearer, and its concept of offset is more intuitive, and when we need to operate on the range associated DOM node, it is certainly container that offset is essential, and IE range There is no display of methods to get these two key variables, and the IE range, which has the same functionality as the range of the broad spectrum, can be deduced from a series of methods provided by these two variables.
Scope Object Fetch:
There are two ways to get scope objects:
1. To obtain a range from the current selection, you can call
Copy Code code as follows:
Document.selection.createRange ()
method returns a TextRange or Controlrange instance based on the current selection.
2. Create a range from the element to call
Copy Code code as follows:
Ocontrolrange = Object.createcontrolrange ()
JS Code
oTextRange = Object.createtextrange ()
The former can be invoked on body,element, and the latter can be invoked on most elements. After the call, the scope completely overwrites the calling element. Equivalent to Movetoelementtext.
TextRange standardization:
First, the following methods are used:
Collapse: The end position is coincident to the start position (true) or the start position is coincident to the end position (false), depending on the parameter.
Parentelement: Gets the element node that encloses the selection area, and the following example invokes the SPAN node.
Copy Code code as follows:
Movetoelementtext (Node A): Changes the selection to a, starting at the front and back of a, such as after the following span node:
Copy Code code as follows:
Range1.compareendpoints (' Xxtoyy ', range2): Xx,yy can be Start or end, take the Range1 xx position and Range2 yy position comparison, according to the order returned -1,1,0 to coincide.
Range1.setendpoint ("Xxtoyy", range2): Xx,yy can be the Start or end, the Range1 xx location to the Range2 yy location.
Transformation:
With the above 5 methods you can start our standardization first step: Get the location, first give the operation example:
(Green block represents a text node, note: The normal hand-written page will not appear two adjacent text nodes, where the use of splittext forced separation)
When we select the area collapse, we may have these four locations: 1,2,3,4, where 1, 4 adjacent element nodes are the simplest:
1,4 Location Standardization:
1. According to Parentelement to get the containing position of the node p, that is the location of the container
2. For all element subnodes of container, verify that it is adjacent to a known location by using the Movetoelementtext new range to surround the child nodes, and then compareendpoints to compare whether to create a new range Whether the front and rear positions coincide with the current position:
Copy Code code as follows:
Range = Range.duplicate ();
Range.collapse (start);
var parent = Range.parentelement (),
siblings = Parent.childnodes;
for (var i = 0; i < siblings.length; i++) {
var child = Siblings[i];
if (Child.nodetype = = 1) {
var tr = range.duplicate ();
Tr.movetoelementtext (child);
Child element node start position comparison
var Comparisonstart = tr.compareendpoints (' Starttostart ', range),
Child element node End position comparison
Comparisonend = tr.compareendpoints (' Endtostart ', range);
The beginning is behind the current position, and there is no need to continue.
if (Comparisonstart > 0) break;
else if (!comparisonstart | | comparisonend = = 1 && Comparisonstart = = 1) return {
Container:parent,
Offset:i
};
else if (!comparisonend) return {
Container:parent,
OFFSET:I + 1
};
}
}
2,3 location Standardization:
2 indicates that the position is between two text nodes, container is P, and because Movetoelementtext cannot act on the text node, you can only think of another method.
3 indicates that the position is in the middle of a text node, at which point container is a text node, and offset is a number of characters.
1. When the 1 position is reached, stop.
2. New range RA, starting at 1, ending in 2 or 3, getting all the characters of Ra Ra_textlength, subtracting its length from ra_textlength for each text node starting from position 1 (data.length), when Ra_ TextLength is 0 o'clock, representing the current position of 2, and the number of text nodes currently passing is offset.
When Ra_textlength is negative, the current position is 3, and the current text node is position 3, and the previous value of Container,ra_textlength is offset.
Example:
Copy Code code as follows:
<p id= "Test" ><strong> bold </strong> General | text <i> Italic </i></p>
<script>
document.getElementById ("Test"). Childnodes[1].splittext (2);
</script>
Standardized Demo
Controlrange standardization
Controlrange is very simple, the item (index) method to get the selection element, combined with its parentnode can be standardized representation.
PS: About the scope of the input box read
Because the specification stipulates that the selection area of the input box and the selection area of the page are separate, the selection area of the input box has different ways of obtaining (IE basically the same).
