JavaScript_javascript スキルでの textRange オブジェクトの使用方法のまとめ

TextRange オブジェクトは、ダイナミック HTML (DHTML) の高度な機能であり、テキストの検索や選択など、多くのテキスト関連のタスクを実行するために使用できます。テキスト範囲を使用すると、文書から文字、単語、文章を選択して選択できます。 TextRange オブジェクトは、HTML ドキュメントが表示するテキスト ストリーム上の開始位置と終了位置を設定する抽象オブジェクトです。

以下は TextRange の一般的に使用される属性とメソッドです:

属性

boundingHeight は、TextRange オブジェクトにバインドされた四角形の高さを取得します
boundingLeft は、TextRange オブジェクトにバインドされている四角形の左端と、それを含む TextRange オブジェクトの左側との間の距離を取得します
offsetLeft offsetParent プロパティで指定されたレイアウトまたは親座標を基準としたオブジェクトの計算された左位置を取得します
offsetTop は、offsetParent プロパティ
で指定されたレイアウトまたは親座標を基準にして計算されたオブジェクトの上部位置を取得します。 htmlText は、TextRange オブジェクト
にバインドされた四角形の幅を取得します。 text 範囲
に含まれるテキストを設定または取得します メソッド

moveStart は範囲の開始位置を変更します
moveEnd は範囲の終了位置を変更します
折りたたむと、挿入ポイントが現在の範囲の先頭または末尾に移動します
move 指定されたテキスト範囲を折りたたみ、空の範囲を指定されたセル数だけ移動します
execCommand は、現在のドキュメント、現在の選択範囲、または指定された範囲に対してコマンドを実行します
select は、現在の選択領域を現在のオブジェクトに設定します
findText はテキスト内のテキストを検索し、検索文字列を囲む範囲の開始点と終了点を設定します。
TextRange オブジェクトを使用するには、通常、次の 3 つの基本的な手順が必要です。

1.テキスト範囲を作成します

2.始点と終点を設定します

3.レンジを操作する

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

<スクリプト言語="javascript"> 関数 moveCursor()
{
var temp = this.txtNum.value
if(isNaN(temp))
{
alert("数字を入力してください");
に戻る }
var rng = this.txtTest.createTextRange(); rng.move("character",temp); rng.select(); }


<ボディ>


カーソルを の位置に移動します。




1.createTextRange()


TextRange オブジェクトを作成します。BODY、TEXT、TextArea、BUTTON などの要素はすべてこのメソッドをサポートしています。このメソッドは TextRange オブジェクトを返します。

2.move("ユニット"[,count])

move() メソッドは 2 つの操作を実行します。まず、このメソッドは前の終了点で現在の文書を重ね、これを挿入点として使用します。次に、挿入点を任意の文字数、単語数、または文単位で前後に移動します。

メソッドの最初のパラメータは文字列で、指定される単位は文字、単語、文、テキストエディットです。 textedit 値は、挿入ポイントをテキスト範囲全体の末尾に移動します (パラメーターは必要ありません)。最初の 3 つの単位が指定されている場合、パラメーターが無視されると、デフォルト値は 1 になります。また、正の数値は前方への移動を表し、負の数値は後方への移動を表します。

move() メソッドの実行後も範囲が重なっていることに注意してください。

3.select()

select() メソッドは、現在のテキスト範囲内のテキストを選択します。いわゆる「カーソル」は境界が一致する範囲として理解できるため、ここでの表示カーソルもこれを使用して実装する必要があります。

コードをコピー

コードは次のとおりです:

<ボディ>
クリサンセマムテラス (都会の黄金鎧テーマソング) <br> 歌手：ジェイ・チョウ アルバム：Still Fantasy <br> 君の涙は弱くて痛い <br> 淡い三日月が過去を引っ掛ける <br> 夜は長すぎて、結露して霜になる <br> 屋根裏部屋の冷たい絶望は誰ですか<br> 雨は優しく流れる 朱色の窓<br> 私の人生は紙の上にあり、風に吹かれています <br> 夢は遠くの雲に変わる <br> 君の姿が風に飛ばされてしまう <br> 菊は痛すぎて笑顔が黄色くなってしまいました<br> 花は散り、心は傷つき、思いは静かに流れていく <br> 北風はまだ混乱の中にあり、夜はまだ若く、あなたの影は切り続けています<br> 湖に霜が生えるまで放っておいてください <br>


<スクリプト言語="javascript"> var rng = txtBox.createTextRange(); 関数 findText(str)
{
if(str=="")

に戻る //moveStart() 関数のオフセット、つまり選択されたテキストをスキップする開始点として変数を定義します
変数番号 = 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(); }
}





上の例は、範囲を選択するための moveStart() メソッドと moveEne() メソッドの使用を示しています。 表示されるいくつかのメソッドの説明は次のとおりです。

4. moveStart("Unit"[,count]) および moveEnd("Unit"[,count])


moveStart() メソッドと moveEnd() メソッドは move() メソッドに似ています。デフォルトでは、開始点はコンテナーの最初の文字であり、終了点は最後の文字です。

上記の selectText() 関数を変更して次のことを証明できます。

コードをコピーします

コードは次のとおりです:

関数 selectText()

{

var rng = txtBox.createTextRange(); rng.moveStart("文字",1); rng.moveEnd("文字",-1); rng.select(); }

Move the start point forward by one character and the end point backward by one character. After running, you can see that the selected range is the entire text range except the first character and the last character.

5.collapse([Boolean])

You can use the collapse() method to overlap the text range from the current size to a single insertion point between characters. The optional parameter of the collapse() method is a Boolean value, which indicates whether the range overlaps at the beginning or end of the current range. The default value is true, coincide with the starting point:

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

One of the most useful methods of the TextRange object is the findText() method, whose default behavior is to browse the text range from the start point to the end point, searching for a case-insensitive string match. If an instance is found in the range, the start and end points of the range are placed in this text, and the method returns true; otherwise, it returns false, and the start and end points remain unchanged. The method only searches the display text, not any tags or attributes.

The optional parameter searchScope is an integer value that indicates the number of characters from the starting point. The larger the value, the more text is included in the search range; a negative value will force the search operation to search backward from the current starting point.

The optional flag parameter is used to set whether the search is case-sensitive, or whether it only matches the entire word. Parameters are integer values ​​that use bitwise math to compute a single value that can hold one or more settings. The value for matching the entire word is 2; the value for matching upper and lower case is 4; if you only want to match one item, it is enough to provide only the desired value, but for both behaviors, use the bitwise XOR operator (^ operator ) makes the value 6.

The most common applications of the findText() method include find and replace operations in a range, and formatting an instance of a string. Because the search usually starts at the current starting point of the range, the starting point must be moved to the range when querying again. After moving to the end of the matched text (such as Example 3), findText() can continue to browse the remaining text range to find another match. You can use the collapse(false) method to force the start point to move to the end point of the first matching range. So the findText() function in Example 3 can also be modified as:

Copy code The code is as follows:

6.parentElement()

The parentElement() method returns a reference to the container containing the text range

Get the DOM object of the text selected by the cursor

Copy code The code is as follows:

<script> <br> function getParElem() <br> { <br> var rng = document.selection.createRange(); <br> var container = rng.parentElement(); <br> //alert(container.getAttribute("id")||container.getAttribute("value")||container.getAttribute("type")); <br> alert(container.tagName); <br> } <br> </script>


This is text that only belongs to Body

This is the text contained in the div

This is the text contained in p

This is the text contained in the div->strong