Common cross-browser operations on javascriptRange objects _ javascript skills

Recently, the online code editor was developed with frequent access to Range objects. Due to cross-browser requirements, TextRange objects and standard DomRange objects under ie were used. Recently, in the process of developing an online code editor, the Range object is frequently exposed. Due to cross-browser requirements, the TextRange object and standard Dom Range object under ie are used.

The developed functions mainly involve the Real-Time Code coloring and syntax prompting functions. Later, we will summarize the issues in feature development or provide the source code.
The following is an example of my understanding of Range objects and common operations:
Range object
The Range object indicates the continuous Range area of the document. For example, you can drag the selected area with the mouse in the browser window.
Dom standard Range object
Https://www.php1.cn/
Use TextRange object in ie
Https://www.php1.cn/
Common methods for establishing range objects
In addition to the standard establishment methods in the above documents, most of the methods are as follows:
Standard dom:
Var range = window. getSelection (). getRangeAt (0 );
Ie:
Var range = document. selection. createRange ();
Note: The standard dom is used to obtain the selection object from the window, While ie is used to obtain the selection object from the document object.
The standard dom range object (dom rang) differs greatly from the TextRange object (TextRange) of ie in the operation mode. It can be said that dom range is controlled based on the dom structure, textRange is based on the byte control of the text node. Read the following example to better understand the operation modes of the two. The range object mentioned below refers to the selection and modification (designMode = on contentEditable = true) operation in the html structure. The operation in textarea is simpler than this, it is not the current research environment.
For details about the methods and attributes of the range object, refer to the relevant api documentation listed above.
1. Select the region to obtain text from the region.
Select a TextRange Region
The TextRange object mainly controls the selection of the region using the following methods: moveStart moveEnd move
These three functions use the same parameter Syntax: fn (sUnit [, iCount])
The first parameter refers to the unit of movement. The following parameters can be used: character, word, sentence, and textedit)
The second parameter refers to the number unit of movement. A negative number is moved before the position, and a positive number is moved after the position.
Character is generally used in actual development. Several other parameters are different from the expected position when editing the Chinese environment and html.
Example 1: TextRange selects the first 4 characters of the cursor

Var rg = document. selection. createRange ();
Rg. moveStart ("character",-4 );
Rg. select (); // select the text area explicitly. You can obtain the selected content without calling this function.
Var text = rg. text; // obtain the selected text
Var htmltext‑rg.html Text; // obtain the html code of the selected Text

Use rg.html Text to obtain the html code of the selected Text, but the results are not satisfactory,
For example:AaaaBb, When you select the aabbfield, The. html Tex returnsAaBb instead of aaBb
Other common location control functions:
Collapse: Pre-and Post-selection points. true indicates the start point and false indicates the end point.
MoveToPoint: move the cursor to the coordinate moveToBookmark: Move to the bookmarks.
Selection of dom range regions
The selection area of the dom range object mainly uses the dom node as the coordinate, and all the boundary moving and region selection functions are based on the dom node as the reference.
SetEnd () setStart () is a function that controls the front and back boundary points of a range,
There are two parameters. The first parameter is the dom node, and the second parameter is the offset. this parameter is different from that in TextRange. move, and is the offset relative to the dom node.
For example, if the node1 nodeValue of a text node is aaabbbccc, and setStart (node1, 3), set the start position between characters a and B.
So how can we select the first four characters of the cursor like Example 1? We need to know several attributes of the dom range object:
The endContainer contains the dom node of the end point of the range.
End Point Position in endOffset endContainer.
StartContainer contains the dom node of the start point of the range.
Start point position in startOffset startiner iner.
Example 2: dom range selects the first 4 characters of the cursor

Var rg = window. getSelection (). getRangeAt (0 );
Rg. setStart (rg. startContainer, rg. startOffset-4); // obtain the node and offset of the current range strat, which is calculated as a parameter
// After setStart is called, it is explicitly selected, which is different from TextRange.
Var text = rg. toString (); // obtain the selected text
Rg. collapse (false); // The collapse function is the same as TextRange. collapse.

In Example 2, the range selection operation applies to a single text content. If it is html content, further calculation is required to obtain it correctly, in general, it is troublesome to select relative ranges in complex dom structures.
In addition, dom range does not directly obtain the html code of the selected content. In the html editable state, you can use the surroundContents () method to wrap the content with a tag such as span and then obtain the content through innerHTML, however, when you select a range boundary point in the html start and end tags (for example, 123 boundary points in the tag), an exception is thrown.
The following is the complete code for testing, including the code for example 1 and example 2, and an html editable area for testing.

New Document