JavaScript中textRange物件使用方法總結-js教程-PHP中文網

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

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

屬性

boundingHeight 取得綁定TextRange物件的矩形的高度

boundingLeft 取得綁定TextRange物件的矩形的高度

boundingLeft 取得綁定TextRange 物件的矩形的高度

boundingLeft 所取得的距離

offsetLeft 取得物件相對於版面或由offsetParent屬性指定的父座標的計算左側位置

offsetTop 取得物件相對於版面或由offsetParent屬性指定的父座標的計算頂端位置

htmlText 取得綁定TextRangeange的矩形的寬度

text 設定或取得範圍內包含的文字

方法

moveStart 變更範圍的起始位置

moveEnd 變更範圍的結束位置

collapse 將插入點移至目前範圍的起始點或結束時折疊到目前範圍的開始或結尾給定文字範圍並將空範圍移動給定單元數

execCommand 在目前文件、目前選取區或給定範圍上執行指令

select 將目前選取區置為目前物件

findText 在文字中搜尋文字並將範圍的開始和結束點設定為包圍搜尋字串。

使用TextRange物件通常包括三個基本的步驟:

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.createTextRange()創建一個

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

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

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

方法的第一個參數是字串，它指定的單位有character(字元)、word(字)、sentence(段落)、textedit。 textedit值將插入點移到整個文字範圍的結束處(不需要參數)。若指定為前三種單位，忽略參數時預設值為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個字符的整個文本範圍。

5.collapse([Boolean])

可以用collapse()方法把文字範圍從目前尺寸重疊成字元間的單一插入點。 collapse()方法的可選參數是Boolean值,它指出範圍是在目前範圍的開始點重合，還是結束點重合。預設值為true，在開始點重合:

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

TextRange物件最有用的方法之一是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>

登入後複製