javascript Rangeオブジェクトはブラウザにまたがってよく使う(上)

5694 ワード

JavaScript html ブラウザ安徽省にある地名。 IE

最近オンラインコードエディタを開発する過程で、Rangeオブジェクトに頻繁に接触しています.ブラウザをまたぐ必要があるので、ieの下でTextRangeオブジェクトと標準Dom Rangeオブジェクトに使用されます.開発の機能は主にリアルタイムコードの着色(CodeColoring)と文法的なヒント(CodeHunts)の機能に関連しています.後で機能開発中の問題やソースの提供をまとめます.
以下は個人のRangeオブジェクトに対する理解と一般的な操作の実例と要約である.

Rangeオブジェクト
Rangeオブジェクトは、選択した範囲をブラウザウィンドウでマウスでドラッグするなど、ドキュメントの連続範囲範囲を表します.
dom標準Rangeオブジェクトhttp://www.w3school.com.cn/xmldom/dom_range.asp
TextRangeオブジェクトをieにおいて使用するhttp://www.hbcms.com/main/dhtml/objects/obj_textrange..

rangeオブジェクトによく使われる確立方法は、開発において上記の文書の標準的な確立方法を除いて、以下のように構築されることが多い.
標準dom:var range=window.get Select().get RangeAt(0);
ie:var range=document.selection.reat Range();

なお、標準domはwindowからセレクションオブジェクトを取得し、ieはdocumentオブジェクトから取得する.
標準的なdom rangeオブジェクト(以下、dom rangという)とieのTextRangeオブジェクト(以下、TextRangeという)は、動作モードに大きな違いがあります.dom rangeはdom構造に基づいて制御されています.TextRangeはテキストノードのバイト制御に基づいています.以下でいうrangeオブジェクトは、html構造の中で選択と変更を行う操作で、textareaの中での操作はこれより簡単で、現在の研究環境ではない.

rangeオブジェクトの具体的な方法と属性は上に挙げた関連アプリのドキュメントを見てください.

1.領域選択取得エリアのテキスト TextRangeのエリア選択 TextRangeオブジェクトは主に以下の方法でエリアの選択を制御します.moveStart moveEnd move この3つの関数は同じパラメータ文法を使います.fn(s Unit[,iCount]) 最初のパラメータは、移動単位を指します.使用できるパラメータは、character、ワード、センター(段落)、textedit(編集エリア全体)です. 第二のパラメータは移動の数の単位を指し、負の数は位置の前に移動し、正の数は位置の後に移動します. 実際の開発では通常characterを使っていますが、他のいくつかのパラメータは中国語環境とhtml編集の場合、予想位置から逸脱しています. 例1:TextRangeカーソルの前の4文字を選択します.

  var rg=document.selection.createRange();
  rg.moveStart("character",-4);
  rg.select();//        ，                
  var text=rg.text;//       
  var htmlText=rg.htmlText;//       html

rg.html Textでテキストを選択するhtmlコードを取得しましたが、結果は思わしくなく、 abbセグメントを選択すると、httmlTexが戻ってくるのはaabb>bbではなく、aabb>bbである. その他の常用位置制御関数: collappse:合併前後の選択点、trueは開始点、falseは終了点となります. moveToPoint:座標moveToBook markにカーソルを移動します.ブックマークに移動します.

dom rangeのエリア選択 dom rangeオブジェクト選択領域は主にdomノードを座標とし、すべての境界移動と領域選択関数はdomノードを参照とする. set End()set Start()は制御範囲の前境界点と後境界点位置の関数であり、二つのパラメータがあります.一つ目のパラメータはdomノードで、二つ目のパラメータはオフセット量です.このパラメータはTextRange.moveとは異なり、domノードに対するオフセット量です. 例えば、文字ノードnode 1のあるnodeValueはaabbbbbbbbccであり、set Start(node 1,3)は文字a、bの間に開始位置を設定する. 例1のようにカーソルの前の4文字を選択するにはどうすればいいですか?dom rangeオブジェクトのいくつかの属性を知る必要があります. endContiner 範囲の終了点を含むdomノード. endOffset endContiner中の終了点位置です. startContiner 範囲の開始点を含むdomノード. startOffset startContinerにおける開始点位置. 例2:dom rangeカーソルの前の4文字を選択します.

  var rg=window.getSelection().getRangeAt(0);
  rg.setStart(rg.startContainer,rg.startOffset-4);//    range strat        ，       
        //   setStart      ， TextRange  
  var text=rg.toString();//      
  rg.collapse(false);//collapse   TextRange.collapse

例2レンゲ選択範囲は単一のテキスト内容に適用され、これがhtml内容であればさらなる計算が必要であり、全体的にはdom rangeは複雑domで結ばれている. 構成で相対範囲を選択するのは面倒くさいです. また、dom rangeは選択内容のhtmlコードを直接取得する方法がありません.html編集可能な状態では、surroundContets()の方法でspanなどのラベルで内容を包んでからinners HTMLで内容を得ることができますが、選択範囲の境界点がhtml開始と終了ラベル内にある場合(例えば、123境界点がaタグ内にある)は一つの異常を投げます.
以下はテスト用の完全コードで、例1と例2のコードとテスト用のhtml編集エリアを含みます.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>
 <BODY>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	window.onload=function(){
		var iframeContent="";
		var divContent="";
		var divChange=false;
		var iframeChange=false;
		var $=function(s){return document.getElementById(s);}
		$("ifram_div").innerHTML+='<div id="infoIframe">iframe</div><iframe id="youretextarea" style="height:200px;width:99%;" class="_editbox"></iframe>';
		var fw=$("youretextarea").contentWindow;
		var f=fw.document;
		f.designMode = 'On';
		f.contentEditable = true; 
		f.open(); 
		f.writeln('<html><style>p{margin:0px;padding:0px;}body{margin:0px;padding:0px;font:16/18px Arial;}</style><body><b>aaaa</b><u>bbbb</u>cccddd</body></html>'); 
		f.close();
		if(f.attachEvent){
			f.attachEvent("onkeyup",fun1);
		}else{
			fw.addEventListener("keyup",fun1,true);
		}
		function fun1(){
			
			if(f.selection){
				var rg=f.selection.createRange();
				rg.moveStart("character",-4);
				//rg.select();//        ，                
				var text=rg.text;//       
				var htmlText=rg.htmlText;//       html  
				alert(text);
				
			}else{
				var rg=fw.getSelection().getRangeAt(0);
				rg.setStart(rg.startContainer,rg.startOffset-4);//    range strat        ，       
																//   setStart      ， TextRange  
				var text=rg.toString();//      
				rg.collapse(false);//collapse   TextRange.collapse  
				alert(text);
			}
		}
	}
  //-->
  </SCRIPT>
  <div id="ifram_div"></div>
 </BODY>
</HTML>

次の(http://kjah.iteye.com/blog/422509)では、Rangeオブジェクトを使用して編集エリアを挿入したり、置き換えたりする操作や、Range操作のテクニックを紹介します.

一般的なES 6の新しい文法的特性をまとめます.