DHTML －－TextRange對象的使用

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

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

在非微軟WIN32平臺，該可能沒有該特性，關於Microsoft@ 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 οnclick=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 οnclick=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 方法取得該命令的狀態。如果以用則該狀態爲真。

xiaoxiaohai123

發佈了163 篇原創文章 · 獲贊 13 · 訪問量 119萬+

他的留言板關注

DHTML －－TextRange對象的使用

CSS屬性與JavaScript編碼對照表

document.execCommand()函數可用參數解析

DHTML －－TextRange對象的使用

JavaScript判斷瀏覽器類型及版本

光標的一些操作總結

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結