在浏览器中，选中一段内容，这段内容就是一个range，这个range 存在于selection中，所以我们要获取这段选中的内容，就要从selection中去获得 range的内容
一、window.selection （支持非IE浏览器 Firefox、Safari、Chrome、Opera）
通过window.selection() 获取一个 selection (var sec = window.selection());
属性：
1、anchorNode： text节点（父级可能为div, p等），选中区域中的第一个节点; 选中区域的第一个字符在anchorNode中的偏移量：anchorOffset（从0开始）。
2、focusNode：text节点（父级可能为div, p等）， 选中区域中的最后一个节点; 选中区域的最后一个字符在focusNode中的偏移量：focusOffset（从0开始）。
3、如果未选中任何内容 isCollapsed（起点和终点是否重合） == true
4、rangeCount， 选中的rang对象数，一般为1(用ctrl进行多选时可以有多个range，但是chrome不允许);
方法：
1、getRangeAt，获得range对象，详细说明随后见
sec.getRangeAt(index)，index < rangeCount，以0开始 ;
2、collapse，设置光标位置
sec.collapse(parentNode, offset), 把光标移到parentNode 中第offset子节点前
3、containsNode 判断节点是否是sec 一部分
containsNode(aNode, aPartlyContained)
aNode：要验证的节点。
aPartlyContained：true，只要aNode有一部分属于selection就返回true；false，aNode必须全部属于selection时才返回true。
4、selectAllChildren 选中一段内容并替换sec 中的 range
selectAllChildren(parentNode)
用JS 选中一个节点中所有的内容可以用这个方法
5、toString
返回selection的纯文本，不包含标签。
参考： http://www.cnblogs.com/rainman/archive/2011/02/27/1966482.html
二、Range对象
通过sec.getRangeAt(0)获得一个range对象.rang对象说明：
属性：
1、
方法：
1、cloneContents：克隆出一个documentfragment 对象。
例：
html结构：
<div>今天天气真好<div><div>不如去爬个山<div>
sec.getRangeAt(0).cloneContents() 获得的节点片段的html为：
参考：http://www.cnblogs.com/tugenhua0707/p/4604755.html
网友评论