ホームページ > 記事 > ウェブフロントエンド > JavaScriptでのtextRangeオブジェクトの使い方のまとめ
JavaScriptでのtextRangeオブジェクトの使い方のまとめ
- 伊谢尔伦オリジナル
- 2016-11-24 10:18:321307ブラウズ
TextRange オブジェクトは、ダイナミック HTML (DHTML) の高度な機能であり、テキストの検索や選択など、多くのテキスト関連のタスクを実行するために使用できます。テキスト範囲を使用すると、文書から文字、単語、文章を選択して選択できます。 TextRange オブジェクトは、HTML ドキュメントが表示するテキスト ストリーム上の開始位置と終了位置を設定する抽象オブジェクトです。
TextRange の一般的に使用されるプロパティとメソッドは次のとおりです。
Properties
boundingHeight TextRange オブジェクトにバインドされた四角形の高さを取得します
boundingLeft TextRange オブジェクトにバインドされた四角形の左端と、含まれている TextRange オブジェクトの左側
offsetLeft レイアウトまたは offsetParent プロパティで指定された親座標を基準とした計算されたオブジェクトの左位置を取得します
offsetTop レイアウトまたは親を基準とした計算されたオブジェクトの上の位置を取得しますoffsetParent プロパティで指定された座標
htmlText TextRange オブジェクトにバインドされた四角形を取得します
text の幅 範囲に含まれるテキストを設定または取得します
Methods
moveStart 範囲の開始位置を変更します
moveEnd範囲の終了位置
collapse 挿入ポイントを現在の範囲の先頭または末尾に移動します
move Collapse テキスト範囲を指定し、空の範囲を指定された単位数だけ移動します
execCommand 現在のドキュメント上でコマンドを実行します。現在の選択範囲、または指定された範囲
select 現在の選択範囲を現在のオブジェクトに設定します
findText テキスト内のテキストを検索し、検索文字列を囲む範囲の開始点と終了点を設定します。
TextRange オブジェクトの使用には、通常、次の 3 つの基本的な手順が含まれます:
1. テキスト範囲を作成します
2. 範囲を操作します
<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. TextRange を作成します。オブジェクト、BODY、TEXT、TextArea、BUTTON、およびその他の要素はすべてこのメソッドをサポートしています。このメソッドは TextRange オブジェクトを返します。
2.move("Unit"[,count])
move() メソッドは 2 つの操作を実行します。まず、このメソッドは前の終了点で現在の文書を重ね、これを挿入点として使用します。次に、挿入点を任意の文字数、単語数、または文単位で前後に移動します。
メソッドの最初のパラメータは文字列で、指定する単位には文字、単語、文、テキストエディットが含まれます。 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() メソッドを使用して範囲を選択する方法を示しています。 出現するいくつかのメソッドの説明は次のとおりです。 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用来设置搜索是否区分大小写，或者是否仅匹配整个单词。参数是整数值，它用按位组合的数学方法计算单个值，这些值能容纳一个或多 个设置。匹配整个单词的值为2；匹配大小写的值为4；如果只想匹配一项，则只提供希望的值就够了，但对于两种行为，要用位操作XOR操作符(^操作符)使 值为6。
findText()方法最常用的应用包括范围中的查找和替换操作，以及格式化一个字符串的实例，因为搜索通常以范围的当前开始点开始，所以再次 查询要将开始点移到范围中匹配文本的末尾(如示例3)，移动后才能使findText()继续浏览剩下的文本范围，来查找另一个匹配。可以使用 collapse(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>