JS Range HTML文档/文字内容选中、库及应用介绍

一、前面的些话

本文的内容基本上是基于“区域范围对象(Range objects)”这个概念来说的。这个玩意，可以让你选择HTML文档的任意部分，并可以拿这些选择的信息做你想做的事情。其中，最常见的Range是用户用鼠标选择的内容(user selection)。

本文有不少篇幅就是讲如何将用户的这种选择转换为W3C Range或Microsoft Text Range对象。

二、什么是Range？

所谓"Range"，是指HTML文档中任意一段内容。一个Range的起始点和结束点位置任意，甚至起始点和结束点可以是一样的（也就是空Range）。最常见的Range是用户文本选择范围(user text selection)。当用户选择了页面上的某一段文字后，你就可以把这个选择转为Range。当然，你也可以直接用程序定义Range。

例如下面这个模样的例子：

2011-04-12
负责调查切尔诺贝利核事故对人与环境造成影响的俄科学家亚布罗科夫博士指出，因福岛核电站使用的燃料较切尔诺贝利核电站多，且有反应堆使用了含有高毒性的钚的燃料，因此"福岛核电站事故可能会比切尔诺贝利带来更严重的后果"。

上面选中状态的那些文字就可以转换成Range对象（下面会详细讲述）。通过Range对象你可以找到Range的起始点和结束点，如果你实在有心，还可以删除或是复制这些内容，或是用其他文字替换，甚至是简单的HTML。

上面的例子可以说是最简单的Range对象的例子，因为其只包含了文字。而实际上，Range对象也是可以包含HTML代码内容的，例如下面这个示例：

<time>2011-04-12</time>
<p>据日本广播协会电视台12日报道，日本经济产业省原子能安全保安院决定将福岛第一核电站核泄漏事故等级提高至7级。这使日本核泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p>
<p>负责调查切尔诺贝利核事故对人与环境造成影响的俄科学家亚布罗科夫博士指出，因福岛核电站使用的燃料较切尔诺贝利核电站多，且有反应堆使用了含有高毒性的钚的燃料，因此"福岛核电站事故可能会比切尔诺贝利带来更严重的后果"。</p>

同样的，Range对象被创建，且包含HTML，现在的问题是选择的内容正好跨过了楚河和汉界（跨标签），如果就单纯的论选择的内容的话，应该如下：

泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p>
<p>负责调查切尔诺贝

显然，上面的HTML属于1级残废，基本无效。然而幸运的是，所有的浏览器都会自动调整HTML片段使其有效，就像变成下面这样：

<p>泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p>
<p>负责调查切尔诺贝</p>

可以看到，浏览器自动补全了一定数目的HTML来让Range有效。如果你复制或是移动Range，你所复制或移动的HTML内容一定是有效的。

三、浏览器的兼容性

在真正操刀JavaScript之前我们需要大致知道Range对象的浏览器兼容性情况。实际上，问题是比较麻烦的，因为至少有3种类似Range对象，且你有必要全部理解。先展示详细的兼容性情况表：

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

1. W3C Range

W3C Range
 Explorer 6/7Firefox 2Safari 1.3Opera 9cloneContents()cloneRange()collapse()tbdtbdtbdtbdcollapsedcommonAncestorContainercompareBoundaryPoints()comparePoint() – Mozilla 扩展createContextualFragment() – Mozilla 扩展deleteContents()detach()endContainerendOffsetextractContents()insertNode()isPointInRange() – Mozilla 扩展selectNode()selectNodeContents()setEnd()setEndAfter()setEndBefore()setStart()setStartAfter()setStartBefore()startContainerstartOffsetsurroundContents()

说明：
cloneContents()的用法类似docFrag = rangeObject.cloneContents()，Range对象内容被克隆同时被添加到文档片段上，并返回自身。但是在Safari下有个问题，即如果选择范围是空，将会返回null而不是空的文档片段。可以通过类似docFrag = rangeObject.cloneContents() || document.createDocumentFragment()这样的代码修复。

deleteContents()处，Range内容会被永久删除，无返回值。

endContainer指用户选择内容结尾处的容器节点。通常是文本节点。

extractContents()用法docFrag = rangeObject.extractContents()。从DOM树上剪切Range对象并返回文档片段。该片段可以粘贴到页面上。

startContainer指用户选择内容起始处的容器节点。通常是文本节点。

startOffset在Opera浏览器下，在选择内容为空的时候返回0。

2. Mozilla Selection

Mozilla Selection
 Explorer 6/7Firefox 2Safari 1.3Opera 9addRange()anchorNodeanchorOffsetcollapse()tbdtbdtbdtbdcollapseToEnd()collapseToStart()containsNode()deleteFromDocument()extend()focusNodefocusOffsetgetRangeAt()isCollapsedrangeCountremoveAllRanges()removeRange()selectAllChildren()selectionLanguageChange()

说明：
anchorNode用法为userSelection.anchorNode。指用户选择内容起始处的容器节点。通常是文本节点。

anchorNode在Opera浏览器下，在选择内容为空的时候返回0。

focusNode用法为userSelection.focusNode。指用户选择内容结尾处的容器节点。通常是文本节点。

focusOffset在Opera浏览器下，在选择内容为空的时候返回0。

getRangeAt()用法为rangeObject = userSelection.getRangeAt(0)，作用是将Mozilla Selection转换为W3C Range。

3. Microsoft TextRange

Microsoft TextRange
 Explorer 6/7Firefox 2Safari 1.3Opera 9boundingHeightboundingLeftboundingTopboundingWidthcollapse()tbdtbdtbdtbdcompareEndPoints()duplicate()expand()findText()htmlTextmove()moveEnd()moveStart()moveToElementText()