DOM-document.selection.createRange方法和TextRange對象

時間 2019-11-10

標籤 dom document.selection.createrange document selection createrange 方法 textrange 對象欄目 HTML 简体版

原文原文鏈接

IE提供了Selection對象和TextRange對象用於實現對被選擇內容進行修改以及在指定區域中進行查找.html

selection對象是document對象的一個子對象,改對象對應於用戶在頁面中所選擇的區域.selection對象的屬性和方法定義以下: type屬性: 該屬性爲只讀屬性.當被選擇區域包含文本或其餘內容時,type屬性返回值爲"Text";當被選擇區域爲空時,type屬性返回值爲"None". clear()方法: 該方法清除所選擇區域的內容. empty()方法: 該方法使selection對象爲空,即取消選擇,並將頁面滾動到最頂部. createRange()方法: 該方法基於用戶當前所選擇的區域建立TextRange對象,以對被選擇區域進行進一步處理.web

TextRange對象對應於頁面中一個矩形區域,該對象能夠用於處理頁面中的任何內容.TextRange對象能夠經過<body>,<button>,<textarea>,<input type="text">等元素的CreateTextRange()方法來建立,這樣建立的區域起始於元素的起始標記. 例如: var myTextRange = document.body.createTextRange() 建立的TextRange對象myTextRange對應的區域包含<body>和</body>標記之間的全部內容. TextRange對象也能夠經過selection對象的CreateRange()方法基於當前被選擇區域建立. 例如: var myTextRange = document.selection.createRange() 基於用戶所選擇的區域建立TextRange對象.瀏覽器

TextRange對象的屬性和方法定義以下: htmlText屬性: 對應於TextRange對象區域內的文本和HTML代碼.該屬性可讀可寫,能夠經過對該屬性賦新值來改變TextRange區域內的HTML代碼內容. Text屬性: 對應於TextRange對象區域內的文本內容(忽略其中的HTML代碼).該屬性一樣是可讀可寫的,能夠經過Text屬性賦新值的方法來改變TextRange區域內的文本內容.同htmlText屬性不一樣的是,text屬性不包含區域內的HTML代碼. 例如: 對於代碼 <body> This is the <strong> TextRange </strong> example; </body> <script> var myTextRange = document.body.createTextRange(); </script> 所建立的TextRange對象,其中htmlText屬性值爲: This is the <strong> TextRange </strong> example; 而text屬性值爲: This is the TextRange example; expand()方法: 該方法用於擴展TextRange區域.擴展能夠基於字符(character),單詞(word),句子(sentence)或整個可編輯文本文本快(entire editable text range).當基於單詞,句子或整個可編輯文本塊進行擴展時,擴展後的TextRange對象將包含完整的單詞,句子或者整個可編輯文本塊. 例如: 若是當前TextRange對象對應的區域爲: This is the TextRange example; 中灰色部分,即字符TextRa所對應部分,當使用expand()方法對該TextRange對象基於單詞擴展: myTextRange.expand("word"); 擴展後,其所對應區域包含完整的單詞"TextRange". This is the TextRange example; findText()方法: 該函數在TextRange對象對應區域中查找指定的文本內容,若是找到,則將找到的內容所在的區域賦於該TextRange對象. 例如: myTextRange.findText("example") 將在TextRange對象myTextRange對應的區域中查找字符串"example" scrollintoView()方法: 該方法使瀏覽器窗口滾動,是TextRange對象對應的區域可見,並處於瀏覽器窗口的最頂端. select()方法: 使TextRange對象對應區域內容選中(處於高亮狀態);並自動調用scrollintoView()方法,是TextRange對象對應區域可見,並位於瀏覽器頂端. movie()方法: 該方法將TextRange對象對應區域向後移動若干個基本單位量.基本單位量能夠是字符(character),單詞(word),句子(sentence).使用該方法對TextRange對象區域進行移動後,TextRange對象對應區域的起點和終點將重合. 例如: myTextRange("word",5) 將myTextRange區域起點向後移動5個單詞,移動後,終點與起點重合在起點的新位置處. moveEnd()方法: 將TextRange對象對應區域的終點移動若干個基本單位量,基本單位量同move()方法中相同,可取字符(character),單詞(word)或句子(sentence). 例如: myTextRange.moveEnd("word",3) 將myTextRange區域的終點向後移動3個單詞. movestart()方法: 將TextRange對象對應區域的起點移動若干個基本單位量.基本單位可取值同moveEnd()方法相同.app

TextRange 對象函數

成員表佈局

下面的表格列出了 TextRange 對象引出的成員。請單擊左側的標籤來選擇你想要查看的成員類型。this

屬性spa
屬性描述 boundingHeight 獲取綁定 TextRange 對象的矩形的高度。 boundingLeft 獲取綁定 TextRange 對象的矩形左邊緣和包含 TextRange 對象的左側之間的距離。 boundingTop 獲取綁定 TextRange 對象的上邊緣和包含 TextRange 對象的頂邊之間的距離。 boundingWidth Retrieves the width of the rectangle that bounds the TextRange object. htmlText獲取綁定 TextRange 對象的矩形的寬度。 offsetLeft 獲取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置。 offsetTop 獲取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置。 text 設置或獲取範圍內包含的文本。
方法orm
方法描述 collapse 將插入點移動到當前範圍的開始或結尾。 compareEndPoints 比較 TextRange 對象的結束點和其它範圍的結束點。 duplicate 返回 TextRange 的副本。 execCommand 在當前文檔、當前選中區或給定範圍上執行命令。 expand擴展範圍以便徹底包含指定單位的範圍。 findText 在文本中搜索文本並將範圍的開始和結束點設置爲包圍搜索字符串。 getBookmark 獲取可用於使 moveToBookmark 返回相同範圍的書籤(白底字符串)。 getBoundingClientRect 獲取指定 TextRectangle 對象集合綁定的對象。 getClientRects 獲取描述對象內容或客戶區內佈局的矩形集合。每一個矩形都描述了一條直線。 inRange 返回一個範圍是否被另外一個範圍包含。 isEqual 返回指定範圍是否與當前範圍相等。 move 摺疊給定文本範圍並將空範圍移動給定單位數。 moveEnd 更改範圍的結束位置。 moveStart 更改範圍的開始位置。 moveToBookmark 移動到書籤。 moveToElementText 移動文本範圍以便範圍的開始和結束位置可以徹底包含給定元素的文本。 moveToPoint 將文本範圍的開始和結束位置移動到給定點。 parentElement 獲取給定文本範圍的父元素。 pasteHTML 將 HTML 文本粘貼入給定文本範圍，替換範圍內任何先前的文本和 HTML 元素。 queryCommandEnabled 返回代表指定命令是否可於給定文檔當前狀態下使用 execCommand 命令成功執行的 Boolean 值。 queryCommandIndeterm 返回代表指定命令是否處於模糊狀態的 Boolean 值。 queryCommandState 返回代表命令當前狀態的 Boolean 值。 queryCommandSupported 返回代表當前命令是否在當前區域上支持的 Boolean 值。 queryCommandValue 返回文檔、範圍或當前選中區對於給定命令的當前值。 scrollIntoView 將對象滾動到可見範圍內，將其排列到窗口頂部或底部。 select 將當前選中區置爲當前對象。 setEndPoint 根據其它範圍的結束點設置某範圍的結束點。

註釋htm

使用此對象能夠獲取並修改元素中的文本，定位文本中的指定字符串，以及執行影響文本外觀的命令。

要獲取一個文本範圍對象，請對 body, button 或 textArea 元素或帶有 TYPE 文本的 input 元素應用 createTextRange 方法。

若是想要修改文本範圍的延展範圍，能夠使用 move, moveToElementText 和 findText 移動其起始和終止位置。在文本範圍內，你能夠獲取並修改純文本或 HTML 文本。這些格式的文本徹底相同，只是 HTML 文本包含 HTML 標籤，而春文本不包含。

此對象在 Microsoft^® Internet Explorer 4.0 的腳本中可用。

creatextrange:

Syntax

oTextRange = object .createTextRange( )

Return Value

Returns燼 TextRange object if successful, or null otherwise.

Remarks

Use a text range to examine and modify the text within an object.

Examples

This example uses the createTextRange method to create a text range for the document, and then uses the text range to display all the text and HTML tags in the document.

SHOWExample
<SCRIPT LANGUAGE="JScript">var rng = document.body.createTextRange( );if (rng!=null) {alert(rng.htmlText);}</SCRIPT>
This example uses the createTextRange method to create a text range for the first button element in the document, and then uses the text range to change the text in the button.

SHOWExample
<SCRIPT LANGUAGE="JScript">var coll = document.all.tags("BUTTON");if (coll!=null && coll.length>0) {var rng = coll[0].createTextRange();rng.text = "Clicked";}</SCRIPT>

Standards Information

There is no public standard that applies to this method.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。