JavaScriptにおけるtextRangeオブジェクトの使い方のまとめ

6795 ワード

JavaScript

TextRangeオブジェクトは、動的HTML(DTML)の高度な特性であり、テキストに関する多くのタスク、例えばテキストの検索や選択などを行うことができる.文字、単語、文を選択的にドキュメントから選択することができます.TextRangeオブジェクトは、HTMLドキュメントに表示されるテキストストリーム上に開始位置と終了位置を作成する抽象的なオブジェクトです.
TextRangeの一般的な属性と方法は以下の通りである.
属性
boundingHeightはTextRangeオブジェクトを結びつける矩形の高さを取得する.
boundingLeftは、TextRangeオブジェクトを結びつける矩形の左端とTextRangeオブジェクトを含む左側の距離を取得する.
offset Left取得対象は、レイアウトまたはoffsetPart属性により指定された親座標に対する計算左位置である.
offset Top取得対象は、レイアウトまたはoffset Part属性により指定された親座標に対する計算上位位置である.
httml TextはTextRangeオブジェクトを結びつける矩形の幅を取得する.
text設定または取得範囲に含まれるテキスト方法
moveStart変更範囲の開始位置moveEnd変更範囲の終了位置collappseは、挿入点を現在の範囲の開始または終了に移動する.
moveは、与えられたテキスト範囲を折り畳み、指定された要素数に空の範囲を移動する.
execCommandコマンドは、現在のドキュメント、現在の選択領域、または与えられた範囲で実行されます.
selectは、現在の選択領域を現在のオブジェクトにセットする.
findTextはテキスト内でテキストを検索し、範囲の開始と終了点を包囲検索文字列に設定します.TextRangeオブジェクトを使用すると、通常3つの基本的なステップが含まれる.
1.テキスト範囲の作成
2.開始点と終了点の設定
3.範囲を操作する

<script language="javascript">  
function moveCursor()  
{  
　　　 var temp = this.txtNum.value;   
　　　 if(isNaN(temp))  
　　　 {  
　　　　　alert("       ");  
　　　　　return;  
　　　 }  
　　　 var rng = this.txtTest.createTextRange();  
　 　　rng.move("character",temp);  
　　　 rng.select();　　　  
}   
</script>  
</HEAD>  
<BODY>  
<input type="text" name="txtTest" value=" ·   《    》        :“    ，    ，    ，       ，        。" size="100"><br>  
      <input type="text" name="txtNum" size="5">     
<input type="button" name="btnMove" value="  " onclick="moveCursor()">   
</BODY>

1.reate TextRange()
TextRangeオブジェクトを作成し、BODY、TEXT、TextArea、BUTONなどの要素はこの方法をサポートします.この方法はTextRangeオブジェクトを返す.
2.move(「Unit」[,count])
move()メソッドは2つの操作を実行します.まず、前の終了点の位置に現在のドキュメントを重ねて、ここを挿入点とします.次のステップは、任意の文字、単語、または文の単位を挿入点を前にまたは後ろに移動します.
メソッドの最初のパラメータは文字列です.指定された単位はcharacter、ワード、センター(段落)、texteditです.textedit値は、挿入点をテキスト範囲全体の最後に移動します.パラメータは不要です.前の3つの単位に指定すると、パラメータを無視した場合のデフォルト値は1です.セルの数を示す整数値を指定してもいいです.正の値は前に移動し、負の値は後ろに移動します.
注意move()メソッド実行後も範囲は重複します.
3.select()
select()メソッドは現在のテキスト範囲内のテキストを選択します.ここでの表示カーソルもこれを利用して実現しなければなりません.いわゆる「カーソル」は境界が重なり合う範囲として理解できますから.

<BODY>  
<textarea name="txtBox" rows="7" cols="50" id="txtBox">  
    (          )   
  ：      ：        

             
              
             
              
             
              
             
            

                 
               
                 
             
</textarea><br>  
<input type="text" value="        " id="txtFind">  
<input type="button" value="     " onclick="findText(txtFind.value)">  
<script language="javascript">  
var rng = txtBox.createTextRange();  
function findText(str)  
{  
　　 if(str=="")  
　　 return;  
　　 //      ，  moveStart()      ，            
　　 var num = 0;  
　　 if(document.selection)　　   
　　   num = document.selection.createRange().text.length;  
    　　 //      ，       ，                    
    　　 rng.moveStart("character",num);  
    　　 rng.moveEnd("character",txtBox.value.length);  
    　　 //        　　   
　　 if(rng.findText(str))  
　　  rng.select();  
　　 //             ，       ，     rng     (         )　　   
　　 if(rng.text!=str)  
　 　{　　   
    　　 alert("    ");  
    　　 rng = txtBox.createTextRange();  
　　 }  
}　　   
</script>   
</BODY>

上記の例では、moveStart()とmoveEne()を利用して範囲を選択する方法を示していますが、いくつかの方法の説明は以下の通りです.
4.moveStart(「Unit」[,count])とmoveEnd(「Unit」[,count])
moveStart()とmoveEnd()の方法はmove()の方法に似ています.デフォルトでは最初の文字は容器で、最後の文字は終了点です.
上のselectText()関数を修正して証明できます.

function selectText() 
{ 
　 var rng = txtBox.createTextRange(); 
　 rng.moveStart("character",1); 
　 rng.moveEnd("character",-1); 
　 rng.select(); 
}

開始点を1文字ずつ前に移動し、終了点を1文字分後ろに移動します.運転後に選択範囲は1文字目と最後の1文字を除くテキスト範囲全体です.
5 collappse([Boolean])
collappse()の方法でテキスト範囲を現在のサイズから文字間の単一の挿入点に重ねられます.collappse()メソッドのオプションパラメータはBoolean値であり、範囲が現在の範囲の開始点で重なるか、終了点で重なるかを指摘しています.デフォルトはtrueです.開始点で重ね合わせます.
6.findText(「search String」[,search Scope,flags])
TextRangeオブジェクトに最も有用な方法の一つは、開始点から終了点までテキスト範囲を閲覧し、大文字と小文字を区別しない文字列マッチングを検索するfindText()方法である.例が範囲内で発見された場合、範囲の開始点と終了点はこのテキストに入れられ、方法はtrueに戻ります.falseに戻ります.開始点と終了点は動きません.方法は表示テキストのみを検索しますが、マークや属性は検索されません.
オプションのパラメータsearchScopeは、開始点からの文字数を示す整数値です.値が大きいほど、検索範囲に含まれるテキストが多いです.負の値は現在の開始点から後方に検索するように強制されます.
オプションのパラメータフラグは、大文字と小文字を区別するかどうか、または単語全体にマッチするかどうかを設定します.パラメータは整数値であり、1つ以上の設定を収容できるビット結合数学的方法で単一の値を計算します.単語全体にマッチする値は2です.大文字と小文字を一致させる値は4です.一つだけマッチしたいなら、希望の値だけを提供すればいいですが、二つの行為に対しては、ビットでXOR操作符(^^操作符)を操作して値を6にします.
findText()メソッドの最も一般的なアプリケーションは、範囲内の検索と置換動作、および文字列の一例をフォーマットすることを含み、検索は通常範囲の現在の開始点で開始されるので、再度照会すると、開始点を範囲内の一致テキストの末尾(例3)に移動してから、残りのテキスト範囲を参照し続けることができる.を選択します.collappse(false)法を使用して最初の整合の範囲の終了点を開始点に移動させることができる.したがって、例3のfindText()関数を以下に変更することもできます.

<script language="javascript"> 

var rng = txtBox.createTextRange(); 

function findText(str) 
{ 
　　  if(str=="") 
　　  return; 

　　  if(rng.findText(str)) 
　　　{ 
　　   rng.select(); 
　　　rng.collapse(false); 
　　   } 
　　  //             ，       ，     rng     (         )　　 
　　  else 
　   　{　　 
　　   alert("    "); 
　　   rng = txtBox.createTextRange(); 
　　   } 
}　　 

</script>

6.parentElement()
parentElement()メソッドはテキスト範囲の容器を含む参照を返します.
カーソル選択テキストのDOMオブジェクトを取得します.

<script>  
function getParElem()  
{  
    var rng = document.selection.createRange();  
    var container = rng.parentElement();  
    //alert(container.getAttribute("id")||container.getAttribute("value")||container.getAttribute("type"));  
    alert(container.tagName);  
}  
</script>  
</HEAD>  

<BODY>  

     Body     
<div>     div    </div>  
<p>     p     </p>  
<div><strong>     div->strong    </strong></div>  
<input type="button" value="       " onClick="getParElem()">  
</BODY>

javascript対象技術基礎(三)