JavaScript で一般的に使用されるクロスブラウザ操作 範囲オブジェクト_JavaScript スキル

最近、オンライン コード エディターを開発する過程で、IE TextRange オブジェクトと標準の Dom Range オブジェクトが使用されることが多くなりました。

開発された関数は主にインスタントコードカラーリング (CodeColoring) と構文ヒント (CodeHints) を含みます。関数開発の問題点は後でまとめられるか、ソースコードが提供されます。
以下は、Range オブジェクトと一般的な操作の個人的な理解の例と概要です:
Range オブジェクト
Range オブジェクトは、ユーザーが選択した領域をドラッグするなど、ドキュメントの連続した範囲領域を表します。ブラウザウィンドウ内でマウスを使用します。
dom 標準 Range オブジェクト
http://www.php.cn/
IE で TextRange オブジェクトを使用する
http://www.php.cn/
一般的に使用される範囲オブジェクトの作成メソッド
開発中の上記のドキュメントの標準確立メソッドに加えて、ほとんどの
標準 DOM は次のように確立されます。 >ie:
var range=document.selection.createRange();
注: 標準 DOM はウィンドウから選択オブジェクトを取得しますが、IE はドキュメント オブジェクトから選択オブジェクトを取得します。
標準の dom range オブジェクト (以下、dom rang と呼びます) と ie の TextRange オブジェクト (以下、TextRange と呼びます) は、動作モードが大きく異なります。 dom range は dom 構造に基づいて制御されていると言えます。 TextRange はテキスト ノード文字セクション コントロールに基づいています。次の例を読むと、これら 2 つの操作モードがよりよく理解できます。以下の範囲オブジェクトは、HTML 構造 (designMode=on contentEditable=true 状態) での選択と変更の操作を指します。テキストエリアでの操作はこれより単純であり、現在の研究環境ではありません。
範囲オブジェクトの具体的なメソッドとプロパティについては、上記の関連する API ドキュメントを確認してください。以下は、実際の開発プロセスでの一般的な関数の説明です。
1. 領域の選択。領域
TextRange の領域選択
TextRange オブジェクトは主に次のメソッドを使用して領域の選択を制御します: moveStart moveEnd move
これら 3 つの関数は同じパラメーター構文を使用します: fn(sUnit [, iCount])
最初のパラメータは、移動の単位を指します。使用されるパラメータ: 文字 (文字)、単語 (単語)、文 (段落)、テキストエディット (編集領域全体)
2 番目のパラメータは、移動の単位を指します。負の数値はその位置の前に移動し、正の数値はその位置に移動します。
実際の開発では文字が一般的に使用されますが、その他のいくつかのパラメータは中国語環境や HTML 編集で想定されている位置から外れます。
例 1: TextRange はカーソルの前の 4 文字を選択します

var rg=document.selection.createRange();

rg.moveStart("character",-4); . select();//テキスト領域を明示的に選択すると、この関数を呼び出さずに選択されたコンテンツを取得できます

var text=rg.text;//選択されたテキストを取得します
var htmlText=rg.htmlText;/ / 選択したテキストの HTML コードを取得します



rg.htmlText を使用して選択したテキストの HTML コードを取得しますが、結果は満足のいくものではありません。

次のようなものです。 b>aaaa bb、aabb セグメントを選択すると、.htmlTex は aabb の代わりに aabb を返します

その他の一般的に使用される位置制御関数:
collapse : マージの前後のポイントを選択します。true は開始点、false は終了点です。
moveToPoint: カーソルを座標に移動します moveToBookmark: ブックマークに移動します。
dom range の領域選択
dom range オブジェクト選択領域は主に dom ノードを座標として使用し、すべての境界移動および領域選択関数は
setEnd() setStart を基準にします。 () は範囲の前後の境界点の位置のコントロール A 関数です。
には 2 つのパラメーターがあり、最初のパラメーターは dom ノード、2 番目のパラメーターはオフセットです。このパラメーターは TextRange とは異なります。 .move、それは dom ノードのオフセットに相対的です。
例: テキスト ノードがあります。node1 ノード値は aaabbbccc、setStart(node1,3) は文字 a と b の間の開始位置を設定します。
次に、例 1 のようにカーソルの前の 4 文字を選択する方法は次のとおりです。 dom range オブジェクトのいくつかの属性を理解する必要があります:
endContainer には、範囲の終点の dom ノードが含まれます。
endOffset endContainer 内のエンドポイントの位置。
startContainer には、範囲の開始点の dom ノードが含まれます。
startOffset startContainer 内の開始点の位置。
例 2: dom range はカーソルの前の 4 文字を選択します

var rg=window.getSelection().getRangeAt(0);
rg.setStart(rg.startContainer,rg.startOffset- 4 );//現在の範囲ストラットのノードとオフセットを取得し、計算後にパラメータとして使用します

//setStartの呼び出し後に明示的に選択されます。これはTextRange

var text=rgとは異なります。 toString();// 選択されたテキストを取得します
rg.collapse(false); // 折りたたみ関数は TextRange.collapse と同じです

例 2 の範囲選択操作は、単一のテキスト コンテンツに適しています。HTML コンテンツの場合、それを正しく取得するには、一般的に、dom range の相対範囲を選択する方が面倒です。の複雑なダム構造。
さらに、dom range が選択されたコンテンツの HTML コードを取得する直接的な方法はありません。 HTML 編集可能状態では、roundContents() メソッドを使用して、span などのタグでコンテンツをラップし、innerHTML を通じてコン​​テンツを取得できます。ただし、選択範囲の境界点が HTML の開始タグと終了タグ内にある場合 (例: as: 123境界点は a タグ内にあります) は例外をスローします。
以下は、例 1 と例 2 のコード、およびテスト用の HTML 編集可能領域を含む、テスト用の完全なコードです。

< スクリプト言語="JavaScript">
<--
window.onload=function(){
var iframeContent="";
>var pChange =false;
var iframeChange=false;
var $=function(s){return document.getElementById(s);}
$("ifram_p").innerHTML ='

iframe

'; var fw= $("youretextarea").contentWindow;
var f=fw.document;
f.contentEditable = true; ;
f.writeln('