JavaScript标准Selection操作，对页面文件选取操作
一、简介
selection是对当前激活选中区（即高亮文本）进行操作。
在非IE浏览器（Firefox、Safari、Chrome、Opera）下可以使用window.getSelection()获得selection对象，本文讲述的是标准的selection操作方法。文中绝大部分内容来自 https://developer.mozilla.org/en/DOM/Selection
二、术语
以下几个名词是英文文档中的几个名词。
1、anchor：选中区域的“起点”。
2、focus：选中区域的“结束点”。
3、range：是一种fragment(HTML片断)，它包含了节点或文本节点的一部分。一般情况下，同一时刻页面中只可能有一个range，也有可能是多个range（使用Ctrl健进行多选，不过有的浏览器不允许，例如Chrome）。可以从selection中获得range对象，也可以使用document.createRange()方法获得。
三、属性
1、anchorNode：返回包含“起点”的节点。
2、anchorOffset：“起点”在anchorNode中的偏移量。
3、focusNode：返回包含“结束点”的节点。
4、focusOffset：“结束点”在focusNode中的偏移量。
5、isCollapsed：“起点”和“结束点”是否重合。
6、rangeCount：返回selection中包含的range对象的数目，一般存在一个range，Ctrl健配合使用可以有多个。
四、方法
1、getRangeAt(index)：从当前selection对象中获得一个range对象。
index：参考rangeCount属性。
返回：根据下标index返回相应的range对象。
2、collapse(parentNode, offset)：将开始点和结束点合并到指定节点（parentNode）的相应（offset）位置。
parentNode：焦点（插入符）将会在此节点内。
offset： 取值范围应当是[0, 1, 2, 3, parentNode.childNodes.length]。
-
- 0：定位到第一个子节点前。
- 1：第二个子节点前。
- ……
- childNodes.length-1：最后一个子节点前。
- childNodes.length：最后一个子节点后。
Mozilla官方文档 中讲到取值为0和1，经测试不准确。文档中还有一句不是十分清楚“The document is not modified. If the content is focused and editable, the caret will blink there.”
3：extend(parentNode, offset)
将“结束点”移动到指定节点（parentNode）的指定位置（offset）。
“起点”不会移动，新的selection是从“起点”到“结束点”的区域，与方向无关（新的“结束点”可以在原“起点”的前面）。
parentNode：焦点将会在此节点内。
Offset：1，parentNode的最后；0，parentNode的最前。
4、modify(alter, direction, granularity)
改变焦点的位置，或扩展|缩小selection的大小
alter：改变的方式。”move”，用于移动焦点；”extend”，用于改变selection。
direction：移动的方向。可选值forward | backword或left | right
granularity：移动的单位或尺寸。可选值，character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", or "documentboundary"。
Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1才会支持此函数，
官方文档：https://developer.mozilla.org/en/DOM/Selection/modify
5、collapseToStart()：将“结束点”移动到，selction的“起点”，多个range时也是如此。
6、collapseToEnd()：将“起点”移动到，selction的“结束点”，多个range时也是如此。
7、selectAllChildren(parentNode)：将parentNode的所有后代节点（parentNode除外）变为selection，页面中原来的selection将被抛弃。
8、apRange(range)
将range添加到selection当中，所以一个selection中可以有多个range。
注意Chrome不允许同时存在多个range，它的处理方式和Firefox有些不同。
9、removeRange(range)
从当前selection移除range对象，返回值undefined。
Chrome目前没有改函数，即便是在Firefox中如果用自己创建（document.createRange()）的range作为参数也会报错。
如果用oSelction.getRangeAt()取到的，则不会报错。
10、removeAllRanges()：移除selection中所有的range对象，执行后anchorNode、focusNode被设置为null，不存在任何被选中的内容。
11、toString()：返回selection的纯文本，不包含标签。
12、containsNode(aNode, aPartlyContained)
判断一个节点是否是selction的一部分。
aNode：要验证的节点。
aPartlyContained：true，只要aNode有一部分属于selection就返回true；false，aNode必须全部属于selection时才返回true。
五、document.activeElement
该属性属于HTML5中的一部分，它返回当前获得焦点的元素，如果不存在则返回“body”。一般情况下返回的是“文本域”或“文本框”。也有可能返回“下拉列表”、“按钮”、“单选”或“多选按钮”等等，Mac OS系统中可能不会返回非输入性元素（textbox，例如文本框、文本域）。
相关属性和方法：
1、selectionStart：输入性元素selection起点的位置，可读写。
2、selectionEnd：输入性元素selection结束点的位置，可读写。
3、setSelectionRange(start, end)
设置输入性元素selectionStart和selectionEnd值
-
- 如果textbox没有selection时，selectionStart和selectionEnd相等，都是焦点的位置。
- 在使用setSelectionRange()时
如果end小于start，会讲selectionStart和selectionEnd都设置为end；
如果start和end参数大于textbox内容的长度（textbox.value.length），start和end都会设置为value属性的长度。 - 值得一提的是selectionStart和selectionEnd会记录元素最后一次selection的相关属性，意思就是当元素失去焦点后，使用selectionStart和selectionEnd仍能够获取到元素失去焦点时的值。这个特性可能会对制作“插入表情”时十分有用（将表情插入到元素最后一次焦点的位置）。
<textarea id="textbox">abc中国efg</textarea>
<script type="text/javascript">
window.onload = function(){
var textbox = document.getElementById(‘textbox‘);
textbox.setSelectionRange(5, 2);
console.log(textbox.selectionStart); // 2
console.log(textbox.selectionEnd); // 2
};
</script>
<textarea id="textbox">abc中国efg</textarea>
<script type="text/javascript">
window.onload = function(){
var textbox = document.getElementById(‘textbox‘);
textbox.setSelectionRange(9, 9);
console.log(textbox.selectionStart); // 8
console.log(textbox.selectionEnd); // 8
};
</script>
支护性：ie6\7\8不支持；Chrome、Firefox、Opera、Safari都支持。
参考文档：https://developer.mozilla.org/en/DOM/document.activeElement
六、document.designMode = ‘on‘;
当document.designMode = ‘on‘时selection的方法、selectionStart、selectionEnd在Firefox和Opera中不可以使用，但Chrome和Safari可以。
例：
1 <div id="box"> 2 “用泡打粉发酵面食，蒸制的时候显得蓬松可口，看起来也好看。”昨日，闵行区报春路上一个菜场附近的馒头包子铺里，一名来自四川的摊贩说，他和面的时候会加些泡打粉，听说将被禁止使用，显得很吃惊：“以前家家户户做馒头包子不都是添加这个嘛！吃了那么多年的东西难道还会有问题？”不过，这位摊贩也承认，添加泡打粉需适量，一旦加多了和出来的面味道就不好，“吃起来有股化肥味。”随后，记者在淘宝上输入“泡打粉”，发现一种名为“香甜泡打粉”的配料成分中，也有47%为钾明矾(硫酸铝钾)。 3 </div> 4 5 <script> 6 7 var oBox = getId("box"); 8 9 function getId(id){ 10 return document.getElementById(id); 11 } 12 13 function getRangeObject(selectionObject) { 14 if (selectionObject.getRangeAt){ 15 return selectionObject.getRangeAt(0); 16 } 17 else { // 较老版本Safari! 18 var range = document.createRange(); 19 range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset); 20 range.setEnd(selectionObject.focusNode,selectionObject.focusOffset); 21 return range; 22 } 23 } 24 25 oBox.onmouseup = function(evt){ 26 var userSelection; 27 if (window.getSelection) { // 现代浏览器 28 userSelection = window.getSelection(); 29 } 30 else if (document.selection) { // IE浏览器、Chrome 考虑到Opera，应该放在后面 31 userSelection = document.selection.createRange(); 32 } 33 34 var rangeObject = getRangeObject(userSelection); 35 36 alert(rangeObject); 37 } 38 39 </script>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
