range对象

概念

什么是range对象？

range对象代表html文档中任意一段内容。其中最常见的是用户使用鼠标选中的一段文本范围，此时我们就可以将这个选择转换为range对象

创建

var range = document.createRange();

获取用户选择的内容

获取selection对象

var userSelection;
if (window.getSelection) { //现代浏览器
    userSelection = window.getSelection();
} else if (document.selection) { //IE浏览器 考虑到Opera，应该放在后面
    userSelection = document.selection.createRange();
}

selection对象：

getRangeAt方法：用于获取该selection对象的某个range对象，参数为该range对象的序列号。
rangeCount属性：表示该selection对象中包含几个range对象。

获取Range对象及选中内容内容

rangeTest() {
  var html,
  showRangeDiv = document.getElementById("showRange"),
  // 获取selection对象
  userSelection = document.getSelection();
  if(userSelection.rangeCount > 0) {
    html = "你选取了" + userSelection.rangeCount + "段内容<br/>";
    for(var i = 0; i < userSelection.rangeCount; i++) {
      var range = userSelection.getRangeAt(i);
      html += "第" + (i + 1) + "段内容为：" + range + "<br/>";
  	}
  	showRangeDiv.innerHTML = html;
  }
}

每个selection对象，都有一个或多个range对象，每个range对象代表用户鼠标选取范围内的一段连续区域，但是在firefox浏览器中，可以通过按住ctrl键选取多个连续的区域，此时一个selection对象中有多个range对象；在其他浏览器中一个selection对象只有一个range对象。

range对象的属性和方法

属性

startContainer

包含“起点”的节点。

endContainer

包含“结束点”的节点。

startOffset

“起点”在startContainer中的偏移量。

startOffset

“结束点”在endContainer中的偏移量。

collapsed: 起点和结束点在一起时为true，即范围是空的，或折叠的。

commonAncestorContainer 第一个包含Range的节点，同时包含起点和结束点，即他们的父节点。

方法

setStart(node, offset)和setEnd(node, offset)

设置选取的起止点，node是对startContainer的引用，偏移则是startOffset；

**setStartBefore(referenceNode)：**将“起点”设置到referenceNode前

**setStartAfter(referenceNode)：**将“起点”设置到referenceNode后

**setEndBefore(referenceNode)：**将“结束点”设置到referenceNode前

**setEndAfter(referenceNode)：**将“结束点”设置到referenceNode后

selectNode(referenceNode)：设置Range的范围，包括referenceNode和它的所有后代节点。 **selectNodeContents(referenceNode)：**设置Range的范围，包括它的所有后代节点。

cloneRange()和cloneContents()：返回一个当前range的副本，前者返回一个range对象，后者返回html片段

deleteContents()：从dom中删除当前range对象，该方法没有返回值

extractContents()：将该range移动到一个节点中，返回此节点

moveContent() {
    var srcDiv = document.getElementById("srcDiv");
    var distDiv = document.getElementById("distDiv");
    var rangeObj = document.createRange();
    rangeObj.selectNodeContents(srcDiv);
    var docFrangMent = rangeObj.extractContents();
    distDiv.appendChild(docFrangMent);
}

insertNode：插入一个节点到该range中（插入至该range的起点）

compareBoundaryPoints()：比较选择文字和指定文字前后位置

var compare = comparerange.compareBoundaryPoints(how, sourceRange);

compare：返回1, 0, -1.（0为相等，1为时，comparerange在sourceRange之后，-1为comparerange在sourceRange之前）
how：如何比较，可选以下方式：
- Range.START_TO_START - 比较两个 Range 节点的开始点
- Range.END_TO_END - 比较两个 Range 节点的结束点
- Range.START_TO_END - 用 sourceRange 的开始点与当前范围的结束点比较
- Range.END_TO_START - 用 sourceRange 的结束点与当前范围的开始点比较
sourceRange：与当前range比较的对象

toString()：返回该范围表示的文档区域的纯文本内容，不包含任何标签

createContextualFragment：根据字符串生成DOM节点

var str = '<div class="container"><strong>test</strong></div>';
var range = document.createRange(); 
var fragment = range.createContextualFragment(str);
document.body.appendChild(fragment);

应用

range替换

实现将选中内容删除再插入新的内容

var selection = window.getSelection();
var rg = selection.getRangeAt(0);
var fragment = rg.createContextualFragment(count++);
var oLastNode = fragment.lastChild; //获得DocumentFragment的末尾位置
rg.deleteContents();
rg.insertNode(fragment);
rg.collapse(false); //合并范围至末尾
selection.removeAllRanges(); //清除range
selection.addRange(rg); //设置range

ranage对象

range对象

概念

获取用户选择的内容

range对象的属性和方法

属性

方法

应用