JavaScript中textRange物件使用方法小結_javascript技巧

TextRange物件是動態HTML(DHTML)的高階特性，使用它可以實現許多和文字相關的任務，例如搜尋和選取文字。文字範圍讓您可以選擇性的將字元、單字和句子從文件中挑選出來。 TextRange物件是在HTML文件將要顯示的文字流上建立開始和結束位置的抽象物件。

　　下面是TextRange的常用屬性與方法：

　屬性

boundingHeight 取得綁定TextRange物件的矩形的高度
boundingLeft 取得綁定TextRange 物件的矩形左邊緣與包含TextRange物件的左側之間的距離
offsetLeft 取得物件相對於版面或由offsetParent屬性指定的父座標的計算左側位置
offsetTop 取得物件相對於版面或由offsetParent屬性指定的父座標的計算頂端位置
htmlText 取得綁定TextRange物件的矩形的寬度
text 設定或取得範圍內包含的文字
　方法

moveStart 更改範圍的開始位置
moveEnd 變更範圍的結束位置
collapse 將插入點移到目前範圍的開始或結尾
move 折疊給定文字範圍並將空範圍移動給定單元數
execCommand 在目前文件、目前選取區或給定範圍上執行命令
select 將目前選擇區置為目前物件
findText 在文字中搜尋文字並將範圍的開始和結束點設定為包圍搜尋字串。
　　使用TextRange物件通常包含三個基本的步驟:

　　1.建立文字範圍

　　2.設定開始點與結束點

　　3.對範圍進行操作

複製程式碼 程式碼如下:

 
 
 

 
移動遊標到第個位置 
  

　　1.createTextRange()

　　創建一個TextRange物件,BODY、TEXT、TextArea、BUTTON等元素都支援這個方法。該方法傳回一個TextRange物件。

　　2.move(”Unit」[,count])

　　move()方法執行兩個操作。首先，方法在前一個結束點的位置重疊當前文檔，將這裡作為一個插入點；下一步，它將插入點向前或向後移動任意個字元、單字或句子單位。

　　方法的第一個參數是字串，它指定的單位有character(字元)、word(字)、sentence(段落)、textedit。 textedit值將插入點移到整個文字範圍的結束處(不需要參數)。若指定為前三種單位，忽略參數時預設值為1,也可以指定一個整數值來指示單元 數，正數代表向前移動，負數代表向後移動。

　　注意在move()方法執行後範圍仍是重疊的。

　　3.select()

　　select()方法選擇當前文本範圍內的文本，這裡的顯示遊標也必須利用它來實現，因為所謂的」遊標」可以理解為邊界重合的範圍

複製程式碼 程式碼如下:

 
  <br> 菊花台 (滿城盡帶黃金甲主題曲)   <br> 歌手：周杰倫 專輯：依然范特西  <br> 你的淚光 柔弱中帶傷   <br> 慘白的月彎彎 勾住過往   <br> 夜太漫長 凝結成了霜   <br> 是誰在閣樓上冰冷的絕望   <br> 雨輕輕淌 朱紅色的窗戶   <br> 我一生在紙上 被風吹亂   <br> 夢在遠方 化成一縷霞   <br> 隨風飄散 你的模樣  <br> 菊花慘淡地傷 你的笑容已泛黃   <br> 花落人斷腸 我心事靜靜淌   <br> 北風亂夜未央 你的影子剪不斷   <br> 徒留我孤單在湖面生霜   <br>
 
 
 
  

　　上面的例子示範了利用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 文字後ろに移動すると、選択範囲が最初の文字と最後の文字を除くテキスト範囲全体であることがわかります。

5.collapse([Boolean])

Collapse() メソッドを使用すると、現在のサイズから文字間の 1 つの挿入ポイントまでのテキスト範囲をオーバーラップできます。 Collapse() メソッドのオプションのパラメータはブール値で、範囲が現在の範囲の先頭または末尾で重なるかどうかを示します。デフォルト値は true で、開始点と一致します:

6.findText("searchString"[,searchScope,flags])

TextRange オブジェクトの最も便利なメソッドの 1 つは findText() メソッドです。このメソッドのデフォルトの動作は、開始点から終了点までテキスト範囲を参照し、大文字と小文字を区別せずに一致する文字列を検索することです。範囲内でインスタンスが見つかった場合、範囲の開始点と終了点がこのテキストに配置され、メソッドは true を返します。それ以外の場合は、false を返し、開始点と終了点は変更されません。このメソッドは表示テキストのみを検索し、タグや属性は検索しません。

オプションのパラメータ searchScope は、開始点からの文字数を示す整数値です。値が大きいほど、検索範囲に含まれるテキストが増えます。負の値を指定すると、検索操作は開始点から後方に検索されます。現在の出発点。

オプションの flag パラメーターは、検索で大文字と小文字を区別するか、単語全体のみに一致するかを設定するために使用されます。パラメーターは、ビット単位の演算を使用して 1 つ以上の設定を保持できる単一の値を計算する整数値です。単語全体を照合する場合の値は 2 で、大文字と小文字を照合する場合の値は 4 です。1 つの項目のみを照合する場合は、必要な値のみを指定するだけで十分ですが、どちらの動作でもビットごとの XOR 演算子を使用します。 (^ 演算子 ) は値を 6 にします。

findText() メソッドの最も一般的な用途には、範囲内の検索と置換操作、および文字列のインスタンスの書式設定が含まれます。通常、検索は範囲の現在の開始点から開始されるため、開始点を移動する必要があります。再度クエリを実行するときに、一致したテキストの末尾に移動した後 (例 3 など)、findText() は残りのテキスト範囲を参照して別の一致を見つけることができます。 Collapse(false) メソッドを使用すると、開始点を最初に一致する範囲の終了点に強制的に移動できます。したがって、例 3 の findText() 関数は次のように変更することもできます:

コードをコピーします コードは次のとおりです:

<スクリプト言語="javascript"> var rng = txtBox.createTextRange(); 関数 findText(str)
{
if(str=="")
戻る
if(rng.findText(str))
{
rng.select(); rng.collapse(false); }
//検索後に最後の範囲が見つからない場合は、検索が完了したことを示すプロンプトが表示され、rng の元の範囲が復元されます (そうでない場合、新しい検索は実行できません)
その他
{
alert("検索が完了しました"); rng = txtBox.createTextRange(); }
}





6.parentElement()

parentElement() メソッドは、テキスト範囲 を含むコンテナへの参照を返します。

カーソルで選択されたテキストの DOM オブジェクトを取得します

コードをコピーします

コードは次のとおりです: <スクリプト> 関数 getParElem() { var rng = document.selection.createRange(); var コンテナ = rng.parentElement(); //alert(container.getAttribute("id")||container.getAttribute("value")||container.getAttribute("type")); アラート(コンテナー.タグ名); }

<ボディ>
これは本文
のみに属するテキストです

これは div

に含まれるテキストです。

これは p

に含まれるテキストです。

これは div->strong

に含まれるテキストです。