w3c range

range 用來(lái)表示用戶(hù)的選擇區(qū)域，這塊選擇區(qū)域由兩個(gè)邊界位置界定，而位置則由其容器以及偏移量構(gòu)成，稱(chēng)作 container 與 offset .如下是一個(gè)簡(jiǎn)單的位置示例：


其中 ^ 表示一個(gè)位置，則 container 為父節(jié)點(diǎn) p，offset即為相對(duì)于父節(jié)點(diǎn)的偏移量為1。需要注意的是當(dāng)container為元素節(jié)點(diǎn)時(shí)，其偏移量單元為節(jié)點(diǎn)，即從容器的第一個(gè)子節(jié)點(diǎn)到當(dāng)前位置處所經(jīng)歷的子節(jié)點(diǎn)數(shù)。

相應(yīng)的，container也可以是文字節(jié)點(diǎn)，這時(shí)container 為 textnode ,而offset則為從該textnode到當(dāng)前位置所經(jīng)歷的 utf-16 字符個(gè)數(shù)（意味著，中文和英文計(jì)數(shù)一樣，不是字節(jié)計(jì)數(shù)）。如

上例中 container 為 "01234567" 這個(gè)文字節(jié)點(diǎn)，而offset 則是從該文字節(jié)點(diǎn)第一個(gè)字符到當(dāng)前位置所經(jīng)歷的字符個(gè)數(shù)即5.
ie range

簡(jiǎn)要介紹一下，具體請(qǐng)查閱 msdn

ie range 沒(méi)有清晰的容器與偏移量的概念，但是基本思想和 w3c range 一樣，具備同等的表達(dá)能力,分為 textrange 與 controlrange，包含一系列的方法。

textrange 不是從字面意義上的單純文本，而是表示用戶(hù)的選擇區(qū)域內(nèi)容（可用其htmlText獲取完整內(nèi)容），其操作方式大多是以文字為單元而不是 dom 樹(shù)節(jié)點(diǎn)。

controlrange 字面意思表示獲取選擇 控件 ，實(shí)際是有些元素（div,img,object...）處于可編輯狀態(tài)時(shí)，經(jīng)單擊可將整個(gè)元素選中。

ie 標(biāo)準(zhǔn)化之獲取

從上面介紹可見(jiàn)，w3c 的range更規(guī)范，更清晰，其 container 與 offset 的概念更直觀，當(dāng)我們需要對(duì)range關(guān)聯(lián)dom節(jié)點(diǎn)進(jìn)行操作時(shí)，無(wú)疑 container ，offset是必不可少的，而 ie range 則沒(méi)有顯示的提供獲取這兩個(gè)關(guān)鍵變量的方法， 前面說(shuō)過(guò) ie range 其實(shí)具備 w3c range 等價(jià)的功能，那么就可以結(jié)合其提供的一系列方法推導(dǎo)出這兩個(gè)變量。

范圍對(duì)象獲取：
范圍對(duì)象有兩種獲取方式：

1.從當(dāng)前選擇區(qū)域獲得 range ，可調(diào)用

方法根據(jù)目前選擇，返回 TextRange 或 ControlRange 實(shí)例。

2.從元素創(chuàng)建 range ，可調(diào)用

Js代碼
oTextRange = object.createTextRange()

前一種 之能在 body,element上調(diào)用，而后一種 可在大多數(shù)元素上調(diào)用。調(diào)用后則該范圍完全覆蓋調(diào)用元素。相當(dāng)于 moveToElementText 。

textrange 標(biāo)準(zhǔn)化：

首先介紹下用到的幾個(gè)方法：

collapse ：根據(jù)參數(shù)將結(jié)束位置重合到開(kāi)始位置（true）或開(kāi)始位置重合到結(jié)束位置（false）。

parentElement ：獲取包圍選擇區(qū)域的元素節(jié)點(diǎn)，如下例調(diào)用后得到span節(jié)點(diǎn)。

moveToElementText (Node a) ：將選擇區(qū)域變更為 a ，起始位置為 a 的前后，如作用到如下 span 節(jié)點(diǎn)后：

range1.compareEndPoints('XxToYy',range2) ：xx,yy 可以為 Start 或 End，取 range1 的 xx 位置和 range2 的 yy 位置比較，根據(jù)前后順序返回-1,1，0表示重合。

range1.setEndPoint("XxToYy",range2) ：xx,yy 可以為 Start 或 End，將range1的xx位置設(shè)為range2的yy位置。

轉(zhuǎn)化：

有了上面的5個(gè)方法就可以開(kāi)始我們的標(biāo)準(zhǔn)化第一步：獲取位置，首先給出操作例子：

 

（綠塊表示文字節(jié)點(diǎn)，注意：正常手工編寫(xiě)頁(yè)面情況下不會(huì)出現(xiàn)兩個(gè)相鄰的文字節(jié)點(diǎn)，這里使用 splitText 強(qiáng)制分離 ）

當(dāng)我們將選擇區(qū)域collapse后，可能有上述四個(gè)位置：1,2,3,4，其中 1，4 相鄰元素節(jié)點(diǎn)最簡(jiǎn)單：

1，4位置 標(biāo)準(zhǔn)化：

1.根據(jù) parentElement 得到包含位置的節(jié)點(diǎn) p ，即為該位置的container

2.對(duì)container的所有元素子節(jié)點(diǎn)，一一驗(yàn)證是否和已知位置相鄰，驗(yàn)證方法即為：通過(guò) moveToElementText 新建range包圍子節(jié)點(diǎn)，再通過(guò) compareEndPoints 比較是否新建 range 的前后位置是否和當(dāng)前位置重合：

2,3位置 標(biāo)準(zhǔn)化：
2 表示位置在兩個(gè)文字節(jié)點(diǎn)之間，container為 p ，由于moveToElementText 無(wú)法作用文字節(jié)點(diǎn)，則只能另想他法。
3 表示位置處于文本節(jié)點(diǎn)中間，此時(shí) container 為文本節(jié)點(diǎn)，而 offset 則要數(shù)字符數(shù)了。
1.當(dāng)?shù)竭_(dá) 1 位置時(shí)，停止。
2.新建range ra，開(kāi)始位置為 1，結(jié)束位置為2或3，取得 ra的所有字符數(shù) ra_textlength，對(duì)從位置1開(kāi)始往右的每個(gè)文字節(jié)點(diǎn)，從 ra_textlength 中減去其長(zhǎng)度(data.length)，當(dāng) ra_textlength 為0時(shí)，代表當(dāng)前位置為2，而當(dāng)前經(jīng)過(guò)的文字節(jié)點(diǎn)數(shù)目即為offset。
當(dāng) ra_textlength 為負(fù)數(shù)時(shí)，表示當(dāng)前位置為3， 當(dāng)前的文字節(jié)點(diǎn)即為位置3 的container，ra_textlength 的上一個(gè)值則是offset。
示例：

標(biāo)準(zhǔn)化 demo

 

 

controlrange 標(biāo)準(zhǔn)化

 

controlrange 就很簡(jiǎn)單了，由 item(index) 方法得到選擇元素，結(jié)合其parentNode 就可以得到標(biāo)準(zhǔn)化表示了。

 

PS : 關(guān)于輸入框的范圍讀取

由于規(guī)范規(guī)定輸入框的選擇區(qū)域和頁(yè)面選擇區(qū)域是分離的，輸入框的選擇區(qū)域有不同的獲取方式 （IE 基本相同）。

最新評(píng)論