DHTML －－TextRange物件的使用

阿新 • • 發佈：2019-01-16

使用TextRange物件一
對於文字處理，許多使用者都只使用the innerText/innerHTML 和 outerText/outerHTML 屬性和它的相關方法，然而使用文字範圍物件將有許多高階的文字操作。TextRange物件可以如下使用：

1、定位給定元素或給定點的文字
2、在文件字元裡查詢單詞或字元
3、移動邏輯單元裡的文字
4、提供文件裡平常的文字或HTML文字讀/寫訪問

在非微軟WIN32平臺，該可能沒有該特性，關於[email protected] Internet Explorer 平臺互動能力，請檢視微軟知識基地庫的文章Q172976

使用TextRange物件二 ——TextRange概述

TextRange物件是動態HTML（DHTML）的高階特性，使用它可以實現很多和文字有關的有用的任務，象搜尋和選擇文字。文字範圍讓您可以選擇性的將字元、單詞和句子從文件中挑選出來。TextRange物件是在HTML文件將要顯示的文字流上建立開始和結束位置的抽象物件。考慮以下簡單的HTML文件：
Java程式碼

<HTML>
<BODY>
<H1>Welcome</H1>
<CENTER><H2>Overview<H2></CENTER>
<P>Be sure to <B>Refresh</B> this page.</P>
</BODY>
</HTML>

  
<HTML>  
<BODY>  
<H1>Welcome</H1>  
<CENTER><H2>Overview<H2></CENTER>  
<P>Be sure to <B>Refresh</B> this page.</P>  
</BODY>  
</HTML>

在該文件中，建立一個在BODY元素上的TextRange物件將會在body的內容文字的開始定位開始位置，在body內容文字的結束位置定位結束位置，該TextRange 物件將包含的文字是“Welcome Overview Be Sure to Refresh this page."

使用TextRange物件我們可以做什麼？

用TextRange物件處理文字分兩個部分。首先建立一個文字範圍，用它的開始和結束位置來封裝需要的文字。第二個步驟對該文字範圍使用某一方法，或者將該文字做個拷貝以在文字的其他地方使用它，一旦文字範圍被定位好，您可以查詢文字，選擇文字和拷貝文字以在文件的其他地方使用。

定位TextRange物件

每個文字範圍都有一個開始和結束位置來定位TextRange物件封裝的文字範圍。當你建立一個新的文字範圍，開始和結束位置預設封裝了整個的文字內容。使用move、 moveStart和 moveEnd 方法可以改變文字範圍的範圍。

還有別的方法可以將TextRange物件放置在別的特定的元素上，或者定位在整個頁面。例如，moveToElementText 能夠定位文字範圍封裝給定元素的包含文字。moveToPoint 可以將文字範圍定位在使用者滑鼠點選的點上。使用者點選的x和y座標通過window.event 物件取得，您可以用它們來將範圍定位在給定的點上，從這個爆破點，您可以將範圍擴大到封裝一個單詞(word)、句子(sentence)、整個可編輯文字(textEdit)（TextRange物件可以包含的整個可能部分）。
Java程式碼

<HTML><HEAD>
<TITLE>moveToPoint Example</TITLE>
<script>
function selectMe() {
var r=document.body.createTextRange();
r.moveToPoint(window.event.x, window.event.y);
r.expand("word");
r.select();
</script>
</HEAD>
<BODY>
<H1 id=myH1 onclick=selectMe()>Click on a word and it will highlight</H1>
</BODY>
</HTML>

 
<HTML><HEAD>  
<TITLE>moveToPoint Example</TITLE>  
<script>  
function selectMe() {  
var r=document.body.createTextRange();  
r.moveToPoint(window.event.x, window.event.y);  
r.expand("word");  
r.select();  

</script>  
</HEAD>  
<BODY>  

<H1 id=myH1 onclick=selectMe()>Click on a word and it will highlight</H1>  

</BODY>

</HTML>

您可以使用body物件、TEXTAREA,或者BUTTON 元素的createTextRange方法來建立TextRange.您也可以從使用者的選擇模式上建立一個文字範圍，selection 物件的createRange 將返回一個文字範圍。您可以想使用createTextRange.建立的範圍一樣使用該範圍的方法、屬性。

建立body範圍的TextRange物件將不包含 TEXTAREA 和 BUTTON 的內容。相反的，您不可以通過改變基於TEXTAREA 和 BUTTON 的文字範圍的開始和結束位置來將範圍擴大到該特定元素以外的範圍去。使用每個元素提供的屬性，, isTextEdit and parentTextEdit是不同階層的方法，如果您的文件上包含一個TEXTAREA，那麼body的createTextRange 將不能找到使用者當前點選的位置。以下上面程式碼的改進版以處理這重情況：
Java程式碼

<HTML><HEAD>
<TITLE>moveToPoint Example</TITLE>
<script for=document event=onclick>
var r
if(window.event.srcElement.isTextEdit)
{
r=window.event.srcElement.createTextRange();
else{
var el=window.event.srcElement.parentTextEdit;
r=el.createTextRange();
r.moveToPoint(window.event.x, window.event.y);
r.expand("word");
r.select();
</script>
</HEAD>
<BODY>
<H1 id=myH1>Click on a word and it will highlight</H1>
<TEXTAREA>
There’s text in this element too that you could click on
</TEXTAREA>
</BODY>
</HTML>

<HTML><HEAD>  
<TITLE>moveToPoint Example</TITLE>  
<script for=document event=onclick>  
var r  
if(window.event.srcElement.isTextEdit)  
{  
r=window.event.srcElement.createTextRange();  
else{  
var el=window.event.srcElement.parentTextEdit;  
r=el.createTextRange();  

r.moveToPoint(window.event.x, window.event.y);  
r.expand("word");  
r.select();  
</script>  
</HEAD>  
<BODY>  

<H1 id=myH1>Click on a word and it will highlight</H1>  

<TEXTAREA>  
There’s text in this element too that you could click on  
</TEXTAREA>  

</BODY>

</HTML>

使用TextRange物件三 ——取得TextRange內容

TextRange物件的內容可以通過TextRange的 text 和 htmlText屬性來檢視。text屬性的和元素物件的innerText 屬性類似的讀/寫屬性，唯一的不同是這裡是封裝在TextRange 物件裡。

TextRange物件的htmlText屬性是隻讀屬性，可以用它來檢查TextRange物件開始和結束位置之間的HTML程式碼。可以使用pasteHTML 方法來象文字範圍中新增HTML內容。儘管您可以新增任何您想新增的HTML內容到文字範圍裡，但是 pasteHTML 方法並不從屬文件的層次結構。就想innerHTML 和 outerHTML 屬性，儘管在文字範圍內加入不正確或不恰當的標籤時pasteHTML 方法不會失敗，但是文件顯示出來的並不象您所期待的那樣。如果您貼上了一些程式碼片段，這些片段將會自動關閉以防止影響隨後的文字或元素。例如，這意味著，如果您的指令碼以來於在 document物件的all 集合。那麼在呼叫pasteHTML方法以後，那麼document.all集合的sourceIndex 將定位在不同的元素上。

使用TextRange物件四 ——比較範圍

您一次可以建立多個文字範圍，獨立的使用它們。同時訪問同一元素的不同部分。您也可以使用duplicate 方法拷貝一個文字範圍。如果您想暫時訪問原始範圍的一部分而由不想重新建立或另存原始範圍時，這非常有用。您可以使用isEqual 和 inRange方法來決定一個文字範圍和另一文字範圍的關係。

因為物件模式不能攜帶文字範圍，任何時候控制發生然後重新進入程式碼時，您都必須重新建立文字範圍。例如，一個被事件處理建立的文字範圍，在事件處理返回時被拋棄。您可以使用inRange 方法來測定一個文字範圍是否整個被包含在另一文字範圍內。使用isEqual 方法來測定兩個文字範圍是否相等。如果文字範圍的開始和結束定位在相同位置，那麼兩個文字範圍相等。注意兩個相等的文字範圍被認為相互包含在另一個裡，也就是任何一個的inRange方法返回真。

您可以使用setEndPoint來設定設定開始或結束位置來和另一個文字範圍匹配。該方法有兩個引數：一個字串，表明要傳送的結束點，源文字範圍將要將結束點設定到它的結束點的文字範圍。

r1.setEndPoint( "StartToEnd", r2 )

您也可是使用 "StartToStart"、 "EndToStart" 和 “EndToEnd" 來設定結束點。

您可以使用 compareEndPoints 方法來比較兩個文字範圍的開始和結束位置。該方法通過比較結束點來返回-1、 0 或者 1，分別表示第一個文字範圍小於，等於或者大於第二個文字範圍。

書籤很容易儲存一個文字範圍的開始和結束位置，並且在您需要它的時候可以馬上恢復這些位置。您可以建立一個通過getBookmark 方法取得文字範圍的，它返回一個不透明的獨一無二的字串來標明書籤。（不透明意味著不可讀或寫），使用傳入字串的moveToBookmark 方法將來將文字範圍移回建立時的開始和結束位置。

使用TextRange物件五 ——命令

您可以使用命令來給文字範圍的文字攜帶格式和特定的動作。您可以使用execCommand方法來執行命令。您需要提供命令名，和要相應的引數。例如，在Microsoft JScript 中，您可以象如下那樣使用 Bold 命令來將文字該為粗體：
Java程式碼

var rng = document.body.createTextRange();
rng.collapse();
rng.expand("sentence");
rng.execCommand("Bold");

var rng = document.body.createTextRange();  
rng.collapse();  
rng.expand("sentence");  
rng.execCommand("Bold");

以上例子將頁面上所有文字轉化為粗體。

並不是每次每個命令都可用，您可以使用queryCommandEnabled 和queryCommandSupported 方法來測試對於特定的文字範圍一個命令是否有用。

為了測試一個特定命令是否已經被一個文字範圍運用，可用使用queryCommandState 方法取得該命令的狀態。如果以用則該狀態為真。

DHTML －－TextRange物件的使用

DHTML －－TextRange物件的使用

XPO學習系列3－－條件物件

IOS之OC入門－－類方法和物件方法

JS－－自定義物件的幾種方法

GObject參考手冊(10)－－GObject的物件屬性

python 物件的魔力－－多型、封裝和繼承

tornado使用者指引（六）－－－－－－Tornado web應用程式結構（一）之Applicaton物件

eclipse外掛開發(1)－獲取工程物件

菜鳥的mongoDB學習－－－（二）MongoDB 資料庫，物件，集合

kafka－－－-kafka API（java版本）

Android加入新的視頻格式－－媒體庫掃描

ps技術－－批量給圖片加水印

構建之法－－－敏捷流程

菜鳥的mongoDB學習－－－（六）MongoDB 索引

Prim算法：最小生成樹－－－貪心算法的實現

蘋果新的編程語言 Swift 語言進階（二）－－基本數據類型

debug－－－null Pointer Exception--一步步查找(2)

Linux Shell腳本編程－－cut命令

Android學習心得（13）－－－ Android代碼混淆（1）

JavaScript裏的Date 對象屬性及對象方法－－實現簡單的日歷

DHTML －－TextRange物件的使用

相關推薦