JS Range HTML文檔/文字內(nèi)容選中、庫(kù)及應(yīng)用介紹

更新時(shí)間：2011年05月12日 00:30:02 作者：

本文的內(nèi)容基本上是基于“區(qū)域范圍對(duì)象(Range objects)”這個(gè)概念來(lái)說(shuō)的

一、前面的些話
本文的內(nèi)容基本上是基于“區(qū)域范圍對(duì)象(Range objects)”這個(gè)概念來(lái)說(shuō)的。這個(gè)玩意，可以讓你選擇HTML文檔的任意部分，并可以拿這些選擇的信息做你想做的事情。其中，最常見(jiàn)的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）。最常見(jiàn)的Range是用戶文本選擇范圍(user text selection)。當(dāng)用戶選擇了頁(yè)面上的某一段文字后，你就可以把這個(gè)選擇轉(zhuǎn)為Range。當(dāng)然，你也可以直接用程序定義Range。

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

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

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

上面的例子可以說(shuō)是最簡(jiǎn)單的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ì)比切爾諾貝利帶來(lái)更嚴(yán)重的后果"。</p>

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

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

顯然，上面的HTML屬于1級(jí)殘廢，基本無(wú)效。然而幸運(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來(lái)讓Range有效。如果你復(fù)制或是移動(dòng)Range，你所復(fù)制或移動(dòng)的HTML內(nèi)容一定是有效的。

三、瀏覽器的兼容性

在真正操刀JavaScript之前我們需要大致知道Range對(duì)象的瀏覽器兼容性情況。實(shí)際上，問(wèn)題是比較麻煩的，因?yàn)橹辽儆?種類(lèi)似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()

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

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

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

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

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()

說(shuō)明：
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

說(shuō)明：
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。可讀/寫(xiě)。

4. 總的兼容性

**總的兼容性**
	Explorer 6/7	Firefox 2	Safari 1.3	Opera 9
W3C Range 詳述
Mozilla Selection 詳述
Microsoft Text Range 詳述

說(shuō)明：

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

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

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

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

復(fù)制代碼代碼如下:

 
var userSelection; 
if (window.getSelection) { //現(xiàn)代瀏覽器 
userSelection = window.getSelection(); 
} else if (document.selection) { //IE瀏覽器 考慮到Opera，應(yīng)該放在后面 
userSelection = document.selection.createRange(); 
} 

由于兼容性的問(wè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和其他瀏覽器寫(xiě)兩套不同的腳本。

需要注意腳本書(shū)寫(xiě)的順序：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ì)象。因此它允許訪問(wèn)定義在對(duì)象上的全部方法和屬性。

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

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

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

復(fù)制代碼代碼如下:

 
var selectedText = userSelection; 
if (userSelection.text) { 
selectedText = userSelection.text; 
} 

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

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

例如在IE7瀏覽器下，選中一段文字再點(diǎn)擊demo頁(yè)面上的測(cè)試按鈕，就會(huì)有類(lèi)似下面的彈出內(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ì)象可以使用類(lèi)似下面代碼：

復(fù)制代碼代碼如下:

 
var getRangeObject = function(selectionObject) { 
if (selectionObject.getRangeAt) 
return selectionObject.getRangeAt(0); 
else { // 較老版本Safari! 
var range = document.createRange(); 
range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset); 
range.setEnd(selectionObject.focusNode,selectionObject.focusOffset); 
return range; 
} 
} 
var rangeObject = getRangeObject(userSelection); 

理想情況下，我們通過(guò)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)容，我們需要通過(guò)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è)例子舉例：

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

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

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

復(fù)制代碼代碼如下:

 
var startP = [the p node]; 
var endLi = [the second li node]; 
range.setStart(startP, 8); 
range.setEnd(endLi, 5); 

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

上面提到了setStart(startContainer, startOffset)以及setEnd(endContainer, endOffset)?？紤]到實(shí)際情況，你很難準(zhǔn)確知道用戶選擇的文字的起始位置，所以，上面一板一眼賦予偏移值的方法顯然有很大的局限性。好在任何（看參見(jiàn)上面的兼容性表格）Range對(duì)象有4個(gè)屬性是用來(lái)定義選擇內(nèi)容起止點(diǎn)的，這4個(gè)屬性與Selection對(duì)象相似，但是卻是不同的名稱(chēng)：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)出來(lái)好些日子了。所以，如果僅僅是為了兼顧低版本的Safari而去使用程序創(chuàng)建Range，我覺(jué)得是一點(diǎn)必要都沒(méi)有。尤其在我們這個(gè)神奇的國(guó)度上，首先使用Safari就少，低版本的就少之又少，Safari老早就已經(jīng)支持getRangeAt()了，Chrome瀏覽器也是如此。

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

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

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

復(fù)制代碼代碼如下:

 
var userSelection, rangeObject; 
if (window.getSelection) { 
//現(xiàn)代瀏覽器 
userSelection = window.getSelection(); 
} else if (document.selection) { 
//IE瀏覽器 考慮到Opera，應(yīng)該放在后面 
userSelection = document.selection.createRange(); 
} 

//Range對(duì)象 
rangeObject = userSelection; 
if (userSelection.getRangeAt) { 
//現(xiàn)代瀏覽器 
rangeObject = userSelection.getRangeAt(0); 
} 

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

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

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

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

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

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

復(fù)制代碼代碼如下:

 
var sel = rangy.getSelection(); 
alert(sel.toString()); 

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

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

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

完整JavaScript代碼如下：

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="http://www.zhangxinxu.com/study/201104/rangy/rangy-core.js"></script> 
<script type="text/javascript" src="http://www.zhangxinxu.com/study/201104/rangy/rangy-cssclassapplier.js"></script> 
<script> 
var cssApplier; 
window.onload = function() { 
rangy.init(); 
cssApplier = rangy.createCssClassApplier("selectClass", true); 
document.body.onmouseup = function() { 
cssApplier.toggleSelection(); 
}; 
}; 
</script> 

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

差不多去年這個(gè)時(shí)候，自己折騰過(guò)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)擊測(cè)試。大致會(huì)有類(lèi)似下面的效果(截自Chrome)：

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

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

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

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

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

參考文章及相關(guān)頁(yè)面：