一、前面的些話
本文的內(nèi)容基本上是基于“區(qū)域范圍對(duì)象(Range objects)”這個(gè)概念來說的。這個(gè)玩意，可以讓你選擇HTML文檔的任意部分，并可以拿這些選擇的信息做你想做的事情。其中，最常見的Range是用戶用鼠標(biāo)選擇的內(nèi)容(user selection)。

本文有不少篇幅就是講如何將用戶的這種選擇轉(zhuǎn)換為W3C Range或Microsoft Text Range對(duì)象。

二、什么是Range？
所謂"Range"，是指HTML文檔中任意一段內(nèi)容。一個(gè)Range的起始點(diǎn)和結(jié)束點(diǎn)位置任意，甚至起始點(diǎn)和結(jié)束點(diǎn)可以是一樣的（也就是空Range）。最常見的Range是用戶文本選擇范圍(user text selection)。當(dāng)用戶選擇了頁面上的某一段文字后，你就可以把這個(gè)選擇轉(zhuǎn)為Range。當(dāng)然，你也可以直接用程序定義Range。

例如下面這個(gè)模樣的例子：

2011-04-12 
負(fù)責(zé)調(diào)查切爾諾貝利核事故對(duì)人與環(huán)境造成影響的俄科學(xué)家亞布羅科夫博士指出，因福島核電站使用的燃料較切爾諾貝利核電站多，且有反應(yīng)堆使用了含有高毒性的钚的燃料，因此"福島核電站事故可能會(huì)比切爾諾貝利帶來更嚴(yán)重的后果"。

上面選中狀態(tài)的那些文字就可以轉(zhuǎn)換成Range對(duì)象（下面會(huì)詳細(xì)講述）。通過Range對(duì)象你可以找到Range的起始點(diǎn)和結(jié)束點(diǎn)，如果你實(shí)在有心，還可以刪除或是復(fù)制這些內(nèi)容，或是用其他文字替換，甚至是簡單的HTML。

上面的例子可以說是最簡單的Range對(duì)象的例子，因?yàn)槠渲话宋淖?。而?shí)際上，Range對(duì)象也是可以包含HTML代碼內(nèi)容的，例如下面這個(gè)示例：

<time>2011-04-12</time> 
<p>據(jù)日本廣播協(xié)會(huì)電視臺(tái)12日?qǐng)?bào)道，日本經(jīng)濟(jì)產(chǎn)業(yè)省原子能安全保安院決定將福島第一核電站核泄漏事故等級(jí)提高至7級(jí)。這使日本核泄漏事故等級(jí)與蘇聯(lián)切爾諾貝利核電站核泄漏事故等級(jí)相同。</p> 
<p>負(fù)責(zé)調(diào)查切爾諾貝利核事故對(duì)人與環(huán)境造成影響的俄科學(xué)家亞布羅科夫博士指出，因福島核電站使用的燃料較切爾諾貝利核電站多，且有反應(yīng)堆使用了含有高毒性的钚的燃料，因此"福島核電站事故可能會(huì)比切爾諾貝利帶來更嚴(yán)重的后果"。</p>

同樣的，Range對(duì)象被創(chuàng)建，且包含HTML，現(xiàn)在的問題是選擇的內(nèi)容正好跨過了楚河和漢界（跨標(biāo)簽），如果就單純的論選擇的內(nèi)容的話，應(yīng)該如下：

泄漏事故等級(jí)與蘇聯(lián)切爾諾貝利核電站核泄漏事故等級(jí)相同。</p> 
<p>負(fù)責(zé)調(diào)查切爾諾貝

顯然，上面的HTML屬于1級(jí)殘廢，基本無效。然而幸運(yùn)的是，所有的瀏覽器都會(huì)自動(dòng)調(diào)整HTML片段使其有效，就像變成下面這樣：

<p>泄漏事故等級(jí)與蘇聯(lián)切爾諾貝利核電站核泄漏事故等級(jí)相同。</p> 
<p>負(fù)責(zé)調(diào)查切爾諾貝</p>

可以看到，瀏覽器自動(dòng)補(bǔ)全了一定數(shù)目的HTML來讓Range有效。如果你復(fù)制或是移動(dòng)Range，你所復(fù)制或移動(dòng)的HTML內(nèi)容一定是有效的。

三、瀏覽器的兼容性

在真正操刀JavaScript之前我們需要大致知道Range對(duì)象的瀏覽器兼容性情況。實(shí)際上，問題是比較麻煩的，因?yàn)橹辽儆?種類似Range對(duì)象，且你有必要全部理解。先展示詳細(xì)的兼容性情況表：

支持：不支持：部分支持：

1. W3C Range

W3C Range

	Explorer 6/7	Firefox 2	Safari 1.3	Opera 9
cloneContents()
cloneRange()
collapse()	tbd	tbd	tbd	tbd
collapsed
commonAncestorContainer
compareBoundaryPoints()
comparePoint() – Mozilla 擴(kuò)展
createContextualFragment() – Mozilla 擴(kuò)展
deleteContents()
detach()
endContainer
endOffset
extractContents()
insertNode()
isPointInRange() – Mozilla 擴(kuò)展
selectNode()
selectNodeContents()
setEnd()
setEndAfter()
setEndBefore()
setStart()
setStartAfter()
setStartBefore()
startContainer
startOffset
surroundContents()

說明：
cloneContents()的用法類似docFrag = rangeObject.cloneContents()，Range對(duì)象內(nèi)容被克隆同時(shí)被添加到文檔片段上，并返回自身。但是在Safari下有個(gè)問題，即如果選擇范圍是空，將會(huì)返回null而不是空的文檔片段。可以通過類似docFrag = rangeObject.cloneContents() || document.createDocumentFragment()這樣的代碼修復(fù)。

deleteContents()處，Range內(nèi)容會(huì)被永久刪除，無返回值。

endContainer指用戶選擇內(nèi)容結(jié)尾處的容器節(jié)點(diǎn)。通常是文本節(jié)點(diǎn)。

extractContents()用法docFrag = rangeObject.extractContents()。從DOM樹上剪切Range對(duì)象并返回文檔片段。該片段可以粘貼到頁面上。

startContainer指用戶選擇內(nèi)容起始處的容器節(jié)點(diǎn)。通常是文本節(jié)點(diǎn)。

startOffset在Opera瀏覽器下，在選擇內(nèi)容為空的時(shí)候返回0。

2. Mozilla Selection

Mozilla Selection

	Explorer 6/7	Firefox 2	Safari 1.3	Opera 9
addRange()
anchorNode
anchorOffset
collapse()	tbd	tbd	tbd	tbd
collapseToEnd()
collapseToStart()
containsNode()
deleteFromDocument()
extend()
focusNode
focusOffset
getRangeAt()
isCollapsed
rangeCount
removeAllRanges()
removeRange()
selectAllChildren()
selectionLanguageChange()

說明：
anchorNode用法為userSelection.anchorNode。指用戶選擇內(nèi)容起始處的容器節(jié)點(diǎn)。通常是文本節(jié)點(diǎn)。

anchorNode在Opera瀏覽器下，在選擇內(nèi)容為空的時(shí)候返回0。

focusNode用法為userSelection.focusNode。指用戶選擇內(nèi)容結(jié)尾處的容器節(jié)點(diǎn)。通常是文本節(jié)點(diǎn)。

focusOffset在Opera瀏覽器下，在選擇內(nèi)容為空的時(shí)候返回0。

getRangeAt()用法為rangeObject = userSelection.getRangeAt(0)，作用是將Mozilla Selection轉(zhuǎn)換為W3C Range。

3. Microsoft TextRange

Microsoft TextRange

	Explorer 6/7	Firefox 2	Safari 1.3	Opera 9
boundingHeight
boundingLeft
boundingTop
boundingWidth
collapse()	tbd	tbd	tbd	tbd
compareEndPoints()
duplicate()
expand()
findText()
htmlText
move()
moveEnd()
moveStart()
moveToElementText()
moveToPoint()
offsetLeft
offsetTop
parentElement()
pasteHTML()
scrollIntoView()
select()
text

說明：
htmlText用法為htmlString = userSelection.htmlText。返回字符串，為TextRange的HTML內(nèi)容，相當(dāng)于innerHTML。只讀。

pasteHTML()，當(dāng)粘貼HTML到一個(gè)文本節(jié)點(diǎn)時(shí)，該文本節(jié)點(diǎn)自動(dòng)分隔。

text用法為string = userSelection.text。返回字符串，為TextRange的文本內(nèi)容，相當(dāng)于innerText?？勺x/寫。

4. 總的兼容性

總的兼容性

	Explorer 6/7	Firefox 2	Safari 1.3	Opera 9
W3C Range 詳述
Mozilla Selection 詳述
Microsoft Text Range 詳述

說明：

• W3C Range對(duì)象是唯一官方指定?；旧掀涫菍?CODE>Range作為包含DOM的文檔片段。
• Mozilla Selection對(duì)象顯得有些多余，其存在是為了向后兼容Netscape 4。其類似于W3C Range對(duì)象，也是基于DOM樹的。
• Microsoft Text Range對(duì)象跟上面兩個(gè)就是郭德綱和玄彬的區(qū)別了，因?yàn)槠涫腔谧址?。事?shí)上，Text Range包含的字符串是很難一下子跳變成DOM節(jié)點(diǎn)的。

總的來說，Mozilla Selection對(duì)象就是個(gè)打醬油的命，僅有的閃光點(diǎn)能夠直接將用戶選擇任何內(nèi)容變成完全Range對(duì)象以及一些額外的方法或是屬性可以向后兼容Netscape 4。但是不幸的是除了IE瀏覽器外的其他瀏覽器都支持此Selection對(duì)象。

四、獲得用戶選擇內(nèi)容

婆婆媽媽的解釋就免了，直接看相關(guān)代碼：

由于兼容性的問題，IE瀏覽器吃IE的包子，其他瀏覽器吃Mozilla的饅頭。

在Mozilla、Safari、Opera下上面的userSelection是個(gè)Selection對(duì)象，而在IE下則是Text Range對(duì)象。這種差異會(huì)影響到你后面的腳本：Internet Explorer的Text Ranges完全不同于Mozilla的Selection或是W3C的Range對(duì)象，你需要分別為IE和其他瀏覽器寫兩套不同的腳本。

需要注意腳本書寫的順序：Mozilla Selection需放在前面。原因在于Opera支持兩種對(duì)象，如果你使用window.getSelection()去讀取用戶選擇的內(nèi)容，Opera會(huì)創(chuàng)建一個(gè)Selection對(duì)象；而使用document.selection則會(huì)創(chuàng)建一個(gè)Text Range對(duì)象。

因?yàn)镺pera支持Mozilla Selection和W3C Range非常好，但是其對(duì)Microsoft Text Range的支持卻差強(qiáng)人意。所以顯然優(yōu)先考慮標(biāo)準(zhǔn)瀏覽器，即使用window.getSelection()。

五、userSelection的內(nèi)容
userSelection變量現(xiàn)在的內(nèi)容要么是Mozilla Selection要么就是Microsoft Text Range對(duì)象。因此它允許訪問定義在對(duì)象上的全部方法和屬性。

Mozilla Selection對(duì)象包含用戶選擇的文本內(nèi)容，如下操作：

alert(userSelection)
雖然格式并不是字符串，但是在現(xiàn)代瀏覽器下還是會(huì)彈出類似下面的內(nèi)容：

泄漏事故等級(jí)與蘇聯(lián)切爾諾貝利核電站核泄漏事故等級(jí)相同。負(fù)責(zé)調(diào)查切爾諾貝
為了從Microsoft Text Range 對(duì)象上獲得同樣的信息，你需要使用userSelection.text。為了讀取旋轉(zhuǎn)的文字，可以使用類似下面代碼：

現(xiàn)在selectedText就包含了用戶所選中的文字了。

您可以狠狠地點(diǎn)擊這里：獲取用戶所選文字demo

例如在IE7瀏覽器下，選中一段文字再點(diǎn)擊demo頁面上的測試按鈕，就會(huì)有類似下面的彈出內(nèi)容：

六、從Selection對(duì)象創(chuàng)建Range對(duì)象
在IE瀏覽器下，userSelection是Text Range，在現(xiàn)代瀏覽器下，userSelection仍然是Selection對(duì)象，要想同樣創(chuàng)建和Selection對(duì)象內(nèi)容一樣的Range對(duì)象可以使用類似下面代碼：

理想情況下，我們通過Selection對(duì)象的getRangeAt()方法就可以得到W3C Range對(duì)象。此方法可以返回給定索引值的range對(duì)象。通常情況下，在JavaScript中第一個(gè)Range的索引值是0。

使用程序創(chuàng)建Range

Safari 1.3不支持getRangeAt()，因此我們要想兼顧此瀏覽器，需要使用其他的方法創(chuàng)建新的Range對(duì)象。顯然，顯示創(chuàng)建一個(gè)對(duì)象：

var range = document.createRange();
上面的一行代碼創(chuàng)建了一個(gè)空的Range，為了插入內(nèi)容，我們需要通過setStart()和setEnd()方法定義起止點(diǎn)。

這兩個(gè)方法需要兩個(gè)參數(shù)：
1. Range起止的DOM節(jié)點(diǎn)
2. Range起止的文本偏移。該偏移指選中文字第一個(gè)字符和最后一個(gè)字符在文本節(jié)點(diǎn)中的位置。

setStart()的兩個(gè)參數(shù)屬性為startContainer和startOffset；setEnd()兩個(gè)參數(shù)屬性為endContainer和endOffset。

以下面這個(gè)例子舉例：

<p>男人，即使到了50歲，也千萬不要碰超過26歲還沒有結(jié)婚的女人。她可以是離婚，喪偶等等的，但是絕對(duì)不能是沒有結(jié)婚。超過了26歲沒有結(jié)婚，這種女人一般心理變態(tài)，不然就是有嚴(yán)重問題。市場很少犯錯(cuò)。即使它犯了錯(cuò)，那被你撿到寶的概率也很小。</p>
<p>婚姻市場未來的變化將會(huì)是很有趣的問題，而且對(duì)未來大陸經(jīng)濟(jì)的走勢也有舉足輕重的影響，對(duì)于行業(yè)的分布，經(jīng)濟(jì)的整體效率有決定性的影響。</p>

<ol>
<li>為什么是26這個(gè)準(zhǔn)確的數(shù)字？</li>
<li>找罵帖</li>
<li>言論是對(duì)的，在100年前，lz穿越了而已。</li>
</ol>此處Range開始于第二個(gè)<p>節(jié)點(diǎn)，結(jié)束與第一個(gè)<li>節(jié)點(diǎn)。（通常文本節(jié)點(diǎn)的第一個(gè)字符的索引是0。）

由于<p>節(jié)點(diǎn)處的文字偏移值是8, <li>節(jié)點(diǎn)處的偏移是5，因而有：

讀取起止選中內(nèi)容

上面提到了setStart(startContainer, startOffset)以及setEnd(endContainer, endOffset)?？紤]到實(shí)際情況，你很難準(zhǔn)確知道用戶選擇的文字的起始位置，所以，上面一板一眼賦予偏移值的方法顯然有很大的局限性。好在任何（看參見上面的兼容性表格）Range對(duì)象有4個(gè)屬性是用來定義選擇內(nèi)容起止點(diǎn)的，這4個(gè)屬性與Selection對(duì)象相似，但是卻是不同的名稱：anchorNode/anchorOffset定義選擇的起始，focusNode/focusOffset定義結(jié)束。

因此，上面的腳本創(chuàng)建選區(qū)可以使用如下代碼實(shí)現(xiàn)：

range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);

Safari的多慮

現(xiàn)在已經(jīng)是2011年了，釋小龍都有緋聞了，Safari 5已經(jīng)出來好些日子了。所以，如果僅僅是為了兼顧低版本的Safari而去使用程序創(chuàng)建Range，我覺得是一點(diǎn)必要都沒有。尤其在我們這個(gè)神奇的國度上，首先使用Safari就少，低版本的就少之又少，Safari老早就已經(jīng)支持getRangeAt()了，Chrome瀏覽器也是如此。

您可以狠狠地點(diǎn)擊這里：Safari下getRangeAt測試demo

選擇demo頁面中的任意一部分文字，然后點(diǎn)擊測試按鈕，在較新版本的Safari瀏覽器下就會(huì)出現(xiàn)類似下圖的結(jié)果：

所以，在當(dāng)前環(huán)境下，要想將Selection對(duì)象轉(zhuǎn)換成Range對(duì)象，直接如下代碼就OK了(完整版)：

七、rangy – JavaScript Range&Selection庫
項(xiàng)目地址：http://code.google.com/p/rangy/

就在幾天前，rangy更新到了版本1.1，作者還新更新了四五個(gè)示意的頁面，展示了相關(guān)的API，方法和屬性等。雖然如此，由于實(shí)例較少，還是讓人很難知道此JavaScript庫如何使用。這里就舉幾個(gè)簡單的例子示意下。//zxx:此插件非壓縮達(dá)115K，個(gè)人覺得有些龐大，在實(shí)際項(xiàng)目中的應(yīng)用價(jià)值不大

示例1，獲取用戶選中的文字：

您可以狠狠地點(diǎn)擊這里：rangy獲取用戶選中文字demo

選中部分文字點(diǎn)擊按鈕，會(huì)有如下彈出（截自Firefox3.6）：

相關(guān)JavaScript代碼如下：

示例2，給選中文字添加背景

您可以狠狠地點(diǎn)擊這里：文字選中添加背景圖demo

選中頁面上一段文字，然后失去焦點(diǎn)，就會(huì)看到文字后面有了個(gè)美女背景圖，如下截圖，截自IE7瀏覽器：

完整JavaScript代碼如下：

如果您看到下面的文字，可能是由于在其他網(wǎng)站或是RSS中閱讀本文，本文原地址：http://www.zhangxinxu.com/wordpress/?p=1591，本文作者：張鑫旭，來自張鑫旭-鑫空間-鑫生活，訪問原出處更多優(yōu)秀技術(shù)文章。
八、實(shí)際的應(yīng)用
微博之插入話題

差不多去年這個(gè)時(shí)候，自己折騰過JS 文本域光標(biāo)處添加文字并選中的內(nèi)容，也是拿的新浪微博示例的，文章是“新浪微博插入話題后部分文字選中的js實(shí)現(xiàn)”，但是去年這篇文章多實(shí)現(xiàn)的話題插入效果是比較弱的：
1. 選中普通文字不能作為話題插入
2. 話題只能插在文本域最后二不是光標(biāo)處
3. 默認(rèn)文字的話題可以重復(fù)插入

所以，趁這個(gè)機(jī)會(huì)，正好把微博之插入話題這個(gè)功能完善下。

您可以狠狠地點(diǎn)擊這里：微博插入話題的效果實(shí)現(xiàn)demo

歡迎輸入內(nèi)容，點(diǎn)擊測試。大致會(huì)有類似下面的效果(截自Chrome)：

源代碼有些高度，為了節(jié)約篇幅，這里就不展示出來了，您可以在demo頁面中看到完整的CSS/HTML/JS代碼。不過JS部分半封裝，您要是有興趣可以在外面包裹一個(gè)函數(shù)使其插件化，我是懶得再去折騰了。

九、結(jié)語相關(guān)

對(duì)于Range相關(guān)的知識(shí)即使到現(xiàn)在都是半生不熟的，所以文章的內(nèi)容更多的算是翻譯性質(zhì)的內(nèi)容。自己并沒有從深入理解的基礎(chǔ)上很淺顯地剖析相關(guān)知識(shí)點(diǎn)，文章很多地方會(huì)顯得不怎么通俗易懂。

文中多展示的Range等兼容性表格的數(shù)據(jù)都是N年前的，還是Safari 1.3時(shí)代的數(shù)據(jù)，老的牙都掉了，實(shí)用價(jià)值大打折扣，不過可以告知的是先前現(xiàn)代瀏覽器所不支持的個(gè)別屬性現(xiàn)早就支持了。

跌跌撞撞，滾滾爬爬。文章難免有表述不準(zhǔn)確的地方，歡迎指正。也歡迎提交相關(guān)的腳本的bug。

1. Introduction to Range
2. W3C DOM Compatibility – Range
3. rangy – A cross-browser JavaScript range and selection library
4. Reveal a Background Image upon Text Selection

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來自張鑫旭-鑫空間-鑫生活

最新評(píng)論